uniapp - [全端兼容] 手机数字键盘没有小数点，当 input 输入框的 type 属性设置 number 后，手机系统的软键盘无法输入小数点和符号问题（此方案 uniapp 全端全平台适用）

已于 2024-09-12 15:48:58 修改
阅读量1w 收藏 4
点赞数 4
分类专栏： 前端组件与功能(开箱即用) 前端常见问题解决 文章标签： uniapp数字键盘没有小数点 uniapp微信支付宝小程序 unia苹果ios键盘没小数点 uniapp移动端h安卓app uniapp手机软键盘没小数点
于 2023-05-13 11:13:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/130654782
版权
前端组件与功能(开箱即用) 同时被 2 个专栏收录
334 篇文章 2037 订阅 ¥9.90 ¥99.00
订阅专栏
前端常见问题解决
126 篇文章 149 订阅 ¥9.90 ¥99.00
订阅专栏
在uniapp项目中，设置input[type=number]可能导致在某些设备上无法输入小数点。通过将type属性设置为digit，可以解决全平台（包括iOS、小程序、安卓等）输入框无法显示小数点的键盘问题。这个解决方案适用于uniapp Vue2和Vue3项目，并提供详细示例代码。
摘要由CSDN通过智能技术生成

效果图

正常在uniapp项目中，用户想要输入数字或金额时，通常都会将 <input> 的 type 属性设置为 number。但是问题来了，可能在苹果IOS手机、小程序上、个别安卓机上就会出现键盘上只有数字，没有小数点和符号的问题。

在uniapp小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，当输入框type设置为number时，解决手机软键盘 “无法输入小数点” 的问题。

uniapp Vue3和Vue2都能用，提供详细示例运行代码。

在这里插入图片描述

解决办法

当

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
uniapp IOS数字键盘没有小数点
颜良文丑的博客
07-29 5586
解决IOS手机用户在输入数字时没有小数点等其它符号。
uniapp限制输入框只能输入数字、小数点、整数、字母正则
weixin_69666355的博客
08-31 5081
【代码】uniapp限制输入框只能输入数字、小数点、整数、字母正则。
UNI-APP_移动端input输入框（type=“number“）输入数字的时候，不能输入小数点问题
小歪博客
08-05 852
UNI-APP_移动端input输入框（type=“number“）输入数字的时候，不能输入小数点问题
uniapp，uview：inputnumber或者input，当type为number的时候，在ios里输入不了小数的问题
最新发布
bittingCat的博客
08-26 672
在做uniapp的H5页面时，有个需求是要输入框要能支持可以保留两位小数输入，不能输入负数和其他字符。心想这简单，直接用uview的inputnumber组件这不就好了，结果测试提bug说不能输入小数点，我心想我的发，自己的不是可以吗，结果去试了一下，确实不能输入。ios里只能弹出自带的数字键盘，而且还是没有小数点的`于是按照惯例，百度开发工程师开始了，开始百度搜索问题：搜到是说type不能为number，把number设置成digit就好了，官方图如下嗯哼，改了之后，自己手机试了一下。
【uniapp】uniapp实现input输入显示数字键盘：
SunPeng的博客
10-29 4182
【uniapp】uniapp实现input输入显示数字键盘：
uniapp 安卓手机 input type=“number“ 没有点，不能输入小数
lmy_loveF的博客
04-29 1061
修改后：type="digit" inputmode="decimal"
IOS无法输入小数点(uniapp开发过程中遇到过的问题!)
weixin_74535649
07-21 4995
IOS无法输入小数点(uniapp开发过程中遇到过的问题!)
uniapp的input标签 type=“number“在移动端打开键盘不能输入小数点问题
weixin_53385000的博客
04-29 3333
踩坑uniapp的input标签 type="number"在移动端打开键盘不能输入小数点问题 下面展示一些 内联代码片。 // An highlighted block <input class="u-f3" type="number" v-model="price" placeholder="￥最低0.12元" /> 后面我把number改成了digit在移动端打开键盘就能输入小数点了，做个标记防止采坑。 // An highlighted block <input clas
uniapp中IOS输入框type=“number“没有小数点问题
mourn_recall的博客
07-06 2186
需要只能输入数字且需要小数点时，使用属性digit，即type="digit"，
uniapp type=“number“ 手机键盘上没有小数点的问题
qq_35461048的博客
02-17 1069
需要把type="number" 改为 type="digit"
uniapp(全端兼容) - 实现点击输入框时完美顶起键盘，获取键盘高度动态计算顶起距离，解决软键盘弹出时输入框被覆盖问题，uniapp微信小程序/移动端h5网页/安卓苹果app（示例代码，一键复制
高级前端工程师
03-07 3734
uniapp，支付宝微信小程序，移动端H5网页网站，软键盘弹出位置不对，软键盘挡住了输入框怎么办，获取键盘高度计算弹出距离，uniapp如何解决输入框input激活后键盘弹出遮挡问题，uniapp输入框偶尔被键盘遮挡，解决uniapp在App环境下输入框被软键盘遮挡的问题，uniapp 完美解决苹果和安卓input框遮挡兼容问题，uniapp输入框拉起软键盘时，输入框显示不全，被软键盘挡住一半，input被键盘遮挡的解决方案，软键盘遮挡输入框，uniapp软键盘顶不起来输入框，输入框没有被软键盘弹出来怎么办
uniapp(全端兼容) - 最新详细实现支付键盘功能组件，从底部弹出数字键盘输入支付密码进行付款交互效果，自定义支付密码键盘仿微信、支付宝支付键盘，1~9密码数字键盘，电商支付（详细示例代码复制运行
高级前端工程师
07-11 2137
uniapp，微信小程序，自定义数字键盘，输入支付密码的键盘组件，uniapp小程序如何实现从底部弹出输入支付密码自定义键盘功能，uniapp小程序密码支付键盘组件插件，自定义数字键盘输入页面，怎么封装底部弹窗自定义数字键盘用于输入支付密码，uniapp小程序仿类似电商支付密码输入模态框，uniapp微信小程序平台实现自定义支付密码键盘，uniapp 密码支付，数字键盘,安全键盘,交易键盘,交易密码,交易密码输入框，uniapp自定义支付键盘: uniapp自定义支付键盘，uniapp小程序端实现键盘输入支
uniapp - 全端兼容 “选项卡瞄点定位“ 功能，点击后滚动到锚点位置并且选项卡自动吸顶，当 “经过“ 锚点时自动定位选项卡（详细运行示例源码，超详细注释稳定可靠！）支持H5、App、小程序全平台
王佳斌
03-29 4784
uniapp瞄点选项卡，uniapp锚点，uniapp H5 微信小程序 APP平台锚点定位，uniapp锚点链接，uniapp实现商品详情锚点定位效果，uniapp项目如何实现锚点定位功能，uniapp 微信小程序 h5网页如何使用锚点定位效果，uniapp如何实现锚点跳转，使用uniapp如何实现锚点定位和滚动监听功能，uni-app H5 小程序中使用锚点定位，uni-app添加锚点和监听滚动切换tab，uniapp实现点击吸顶锚点定位，uniapp滚动吸顶+锚点+滚动自动tab切换，uniapp锚点
uniapp(全端兼容) - 最新实现车牌号键盘与格子间隔显示组件，汽车牌照录入支持自定义样式、新能源等，uniapp全平台可用的汽车车牌号键盘输入功能（附带组件完整源码，开箱即用，稍微改改就能用）
高级前端工程师
04-12 4185
uniapp车牌组件，uniapp h5 小程序 app车牌号键盘，uniapp h5 小程序 app汽车牌照，uniapp h5 小程序 app车牌号输入功能插件，uniapp车牌号插件，uniapp实现车牌号输入框，uniapp app车牌号输入键盘功能源码，，uni-app 实现 车牌键盘，uniapp 车牌号输入 车牌号键盘 新能源车牌键盘 特殊车辆车，uni-app小程序车牌号键盘，uni-app + uview 车牌键盘，uniapp添加车牌组件的实现与使用，uniappH5 调起车牌号码键盘，
uniapp获取键盘高度顶起底部输入框
weixin_51526447的博客
12-19 2178
uniapp获取键盘高度顶起底部输入框
uni-app 在移动端input输入框输入数字的时候，不能输入小数点问题。（type=“number“）
PrimaryColor
02-02 6624
如果input输入框type=“number”，那么最后在移动端，不会出现小数点，也就不能输入小数。 <inputtype="digit" placeholder="请输入价格" /> 只有将输入框的type=“digit”： <inputtype="digit" placeholder="请输入价格"" /> ...
uni-app 输入框类型为number时，ios系统不能输入小数点问题
Change!
03-22 6163
在做app时，输入框 Android 可以输入小数点，ios却不可以？？？ 解决方法：把type类型更换为digit就可以了。 <input type="digit" placeholder="请输入金额"" />
uniapp - 强力覆盖 checkbox 复选框样式兼容全端app
11-11
Uniapp是一个基于Vue.js的跨平台应用开发框架，它强力覆盖了checkbox复选框样式，使得复选框在不同的移动端app上都能有良好的兼容性。 在Uniapp中，开发者可以通过简单的代码实现复选框的样式定制和覆盖。这意味着无论是在iOS、Android还是其他移动平台上，复选框的样式都能够被统一，并且可自定义。这对于开发者来说是非常方便的，他们不需要为不同平台去逐个调整复选框的样式，而是可以直接在Uniapp中进行统一的定制。 另外，Uniapp还支持使用flex布局来布置和调整复选框组件，这使得复选框的样式和布局更加灵活和方便。而且，Uniapp还提供了丰富的组件和插件库，开发者可以根据需要选择合适的组件来实现复选框的样式兼容。 总的来说，Uniapp强力覆盖了checkbox复选框样式，使得复选框在全端app中都能够有良好的兼容性。它提供了灵活的定制和布局方式，同时支持丰富的组件和插件库，使得开发者能够更加便捷地实现复选框样式的兼容。因此，在Uniapp中开发复选框组件，可以获得更好的开发体验和更广泛的应用范围。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值