移动端input提起数字键盘没有小数点的问题

博主接到一个移动端页面数字键盘的bug,客户浏览时唤醒的数字键盘无小数点。经测试,搜狗输入法未复现,苹果原生输入法复现。博主针对安卓和iOS研究唤醒数字键盘的方法,安卓设置input的type为number或tel,iOS用pattern属性,还对输入做了限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天接到一个bug。
客户浏览移动端页面的时候,唤醒数字键盘只有数字0-9,没有小数点。
如图
在这里插入图片描述
经测试,搜狗输入法没有复现。但是换成苹果原生输入法就复现了。
看了下代码:

<input type="number"  pattern="[0-9]*">

这里我针对ios和安卓都做了下研究和总结,如何唤醒数字键盘

1.安卓

方法:设置input的type是number或tel

<input type="number">
<input type="tel">

2.ios

方法:pattern=“number”,可以直接打开输入法的数字键盘,可以输入.和数字。pattern="[0-9]*" 则是可以调九宫格,只能输入数字,比如输入手机号。

<input type="number" pattern="number">//输入.和数字
<input type="number" pattern="[0-9]*">//只能输入数字

这里我测试后,发现pattern="number"后可以输入小数点了,但是其他字符也可以输入emmmm。所以我又加了点限制:

<input type="number" pattern="number" onkeyup="value=value.replace(/[^\d\.]/g,'')"/>
//保证数字键盘及只有数字和小数点可以输入

成果图
在这里插入图片描述

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值