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

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


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

1.安卓

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



2.ios

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

//输入.和数字
//只能输入数字

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


//保证数字键盘及只有数字和小数点可以输入

成果图
移动端input提起数字键盘没有小数点的问题_第2张图片

你可能感兴趣的:(HTML5学习札记)