前面在做一个H5中用到的6位数字密码弹框(类似支付、微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层。
先说下实现密码框的思路,一般是采用遮挡隐藏一个输入框,然后在输入框的上面该一层一般是一组6个<span>●</span>,然后通过点击布局是让隐藏的输入框获得焦点,最后监听input的textChange,添加对应个数的●,等于6个的时候执行相应的处理。
一开始为了达到input的完全隐藏,可谓下了许多手段:z-index:负数,opacity:0, color: transparent !important;,可是发现还是不好使。最后尝试了 margin-left: -100%; text-indent: -999em;//文本向左缩进 才解决了问题。
终极大招:再配合设置下隐藏的input的宽度为1px