js模拟支付宝填写密码密码框实现多重效果

如果你不知道如何描述标题，请先看截图。一般的效果是在盒子里输入密码。

这种想法的实现的开始是一个小盒子是一个类型的密码输入，每输入一个自动跳转到下一个，删除会自动跳转到前一个，Android是好的，错误是不是很顺利，但iOS将出现在键盘和频繁迁移，影响用户体验。原因是，每一个输入将继续专注和模糊，每一次的焦点将打开键盘，模糊将关闭键盘，所以…这个计划当然没有。

PM没有办法达到这个效果。伍德有办法打败它。糟糕的用户体验会使你哑口无言。谁想成为前端

由于经常的焦点和模糊所造成的许多问题必须是密码箱，我们为什么不输入一个输入框，小盒子会用其他方式模拟呢。

以下是实现的模式：

{密码箱。
宽度：310px；
左：1px填充；
职位：相对；
边境：1px solid # 9f9fa0；
边界半径：3px；
}
密码箱，输入{类型=电话} {
宽度：99%；
身高：45px；
颜色：透明；
位置：绝对；
顶部：0；
左：0；
边界：无；
字体大小：18px；
不透明性：0；
Z指数：1；
字母间距：35px；
}
假框输入{
宽度：44px；
身高：48px；
边界：无；
边境：1px solid # e5e5e5；
文本对齐：中心；
字体大小：30px；
}
假框输入：第n个最后的子（1）{
边界：无；
}

的。密码箱，密码输入： / /焦点{密码箱需要改变时，它是集中的，否则会出现闪烁的光标在iOS。
左：- 1000px；
上图：- 100px；
}

输入= $（）假框输入；
$（#密码输入），（输入
var pwd =美元（这），瓦迩（）饰（）；
对于（var i = 0，len = pwd.length；我< len；i++）{
input.eq美元（+我+）。瓦迩（PWD {我}）；
}
input.each美元（函数（）{（）
var索引= $（this）；
如果（索引=镜头）{
美元（这个）。瓦迩（）；
}
}）；
如果（= = 6）{
Self.sendPackage（PWD）； / /发送密码
}
}）；

一般的思想是动态地监视真实密码箱的输入，修改小盒子里的密码箱的内容。

事实上，实施效果并不难，关键是思维和解决这该死的兼容，完成的效果时，iOS会闪动的光标，Android没有，然后找到一系列的方法来隐藏光标，例如当焦点设置文本缩进，颜色透明等等，但都无济于事，后来发现淘宝有一个解决方案是集中在密码箱放在一边，因为外层溢出隐藏，这个问题的完美解决方案。

以上是本文的全部内容，希望能帮助大家学习javaｓｃｒｉｐｔ程序设计。