2021-07-14

H5页面，IOS系统，验证码输入框可以无限输入数字和字母

在项目中遇到了一个很奇怪的bug，在一个H5页面中的验证码输入框里限定了最大长度和类型，但是在IOS系统上，如果输入一个字母后，可以无限输入字母和数字。

<input type="number" maxLength="6"></input>

然后死活没定位出来是为什么，在安卓系统里面是OK，没问题的，但是在IOS上就有这个bug。抱着迷茫的心问了下旁边的大哥，然后大哥说不可能呀，不然你加个正则校验试试。
去尝试找了一下比较简单的方法

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

哦吼，加了 pattern="[0-9]*"就OK了，让它只能弹出数字键盘，切换不了中文的键盘，就没那么啰嗦了！！！
经过这么一个小bug，意识到我们平时在开发移动端的时候，兼容安卓和IOS系统方面的问题还是要多注意啊！！！不然用户体验感极差。