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

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

最开始实现的思路是一个小方框就是一个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

下面是实现的样式：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表