当前位置:Gxlcms > html代码 > 移动web模拟客户端实现多方框输入密码效果【附代码】_html5教程技巧

移动web模拟客户端实现多方框输入密码效果【附代码】_html5教程技巧

时间:2021-07-01 10:21:17 帮助过:39人阅读

不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码。

最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验。原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了。

PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说,谁要咱是前端呢~拗不过就找解决方案吧。

既然多个是频繁focus和blur导致的问题,又必须是密码框,那何不就用一个input框来输入呢,小方框就用别的方式模拟,开干。这是最后的效果:http://jsbin.com/neqesiqogu/edit?html,css,js,output

下面是实现的样式: