js仿支付宝填写支付密码效果实现多方框输入密码(支付宝是怎么写)

推荐整理分享js仿支付宝填写支付密码效果实现多方框输入密码(支付宝是怎么写)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:支付宝上怎么写,支付宝怎么填写,支付宝上怎么写,我的支付宝怎么写,支付宝怎么写,js调用支付宝,js支付宝支付,js调用支付宝,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

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

既然多个是频繁focus和blur导致的问题，又必须是密码框，那何不就用一个input框来输入呢，小方框就用别的方式模拟，开干。

下面是实现的样式：

大致的思路就是动态监听真实密码框的输入修改小方框内密码框的内容。

其实效果实现不难，关键是思路还有解决该死的兼容，完成该效果的时候IOS会有闪动的光标，android没有，然后找一系列方法去隐藏光标，比如focus时候设置text-indent,color设置transparent等等，但都无济于事，后来发现淘宝有个办法是focus时候把密码框丢到一边去，因为外层有overflow hidden，完美解决了问题。