输入ios踩大坑前言:最近有需求将整个平台的交易密码由原来的6-16位复杂密码改为6位纯数字交易密码,涉及业务较多场景,但无非是修改两种:设置交易密码,使用交易密码设置交易密码:普通条形输入框,弹出数字键盘,支持明文和深色文本切换查看使用交易密码设置:显示六格,弹出数字键盘先说第一个,设置交易密码需要弹出数字键盘,maxlength=6,支持明暗文本互换。由于type=password不能调出数字键盘,我也想显示密文,所以找了一个css属性-webkit-text-security:disc;显示输入中的内容???;所以明暗文本的切换就变成了这个样式的动态添加,然后用type=tel调出数字键盘,maxlength=6来控制长度,在安卓机上完美运行,满足预期的ios的上面是炸弹。第一次用密文输入时,输入后切换成明文时(也就是把上面的样式去掉),结果是如下图的奇怪情况。只有最后输入的数字切换为明文,其他的还是暗文。第一次输入纯文本时,在纯文本和深文本之间切换是没有问题的(这充分说明ios-webkit-text-security:disc;对这种风格的支持不是很好)。享受中间一个div模拟一个输入框好吧,终于写了半天,发现光标不好模拟,所以放弃了最后的解决方案:处理判断浏览器设备uaandroidforiosandAndroid单独:style+type=tel+maxlength=6ios:type=tel+type=password+pattern=[0-9]*pattern=[0-9]*:这个是用来调出case的数字键盘的ios环境下type=password的,但是这个东西在android调出数字键盘是不行的,android和ios是分开处理的。更多模式知识请参考模式。数字的校验有两种:
