今天接到一个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,'')"/>
//保证数字键盘及只有数字和小数点可以输入
成果图