本文主要是介绍h5 ios手机 隐藏input输入光标,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
前面在做一个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
这篇关于h5 ios手机 隐藏input输入光标的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!