当前位置: 首页 > Web前端 > CSS

input弹出数字键盘的那些坑

时间:2023-03-30 17:35:11 CSS

输入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是分开处理的。更多模式知识请参考模式。数字的校验有两种:用于表单校验,这两个正则表达式的作用是一样的,但是表现上有很大的不同:在iOS中,只有[0-9]*可以激活九格数字键盘,\d在Android4.4及以下(包括X5内核)下无效,两者调出数字键盘;Android4.4.4及以上版本只识别type属性,即上述代码将type="number"改为type="text"时,会调出全键盘,而不是九宫格数字键盘。在写的过程中,又遇到了一个问题。刚开始接触ios的时候,我写的是type=number+maxlength=6。这时候发现当是number的时候,maxlength不起作用。我累了,请参考type=numbermaxlength不起作用。第二种情况是使用交易密码代码方案:一个input设置为透明,去掉边框,去掉颜色,下面放一个div。当两个位置重合时,设置输入焦点时,为div设置边框。相当于输入聚焦时高亮显示,模糊时去掉边框

</div>.pwd-input{width:300%;高度:4.4rem;颜色:透明;位置:绝对;顶部:0;左:-200%;18px;不透明度:0;z-index:1;}.fake-box.pwd-dot{display:inline-block;宽度:16.66%;高度:4.4rem;颜色:#13334D;:1px实心#D8E2E9;文本对齐:居中;垂直对齐:顶部;背景:#ffffff;}.dot{边距:1.6rem0;显示:内联块;宽度:1.2rem;高度:1.2rem;-半径:50%;background:#13334D;}效果完美实现。其实一开始,我的输入:width:100%;left:0是这样写的。这时候安卓完美运行,ios却又炸了。ios上的输入光标还稳稳地站在那里,忽明忽暗。这是一个大头。为什么ios上的问题比Android上的多?哭死冥想:有高手给点意见,input只负责接收事件,不需要toshow,所以可以把input的宽度设置成300%;左:-200%;将光标位置移出屏幕,这样就完美解决了问题。其实一开始这六个格子都是别人提供的现成的react组件,但是有个老系统用不上react,所以就根据组件写了一个类似的东西。起初,我无法理解为什么width:300%;左:-200%写在心里。组件人哈哈大笑,终于发现自己太年轻太简单了