仿支付宝javaｓｃｒｉｐｔ密码输入框

如今，许多付费场景都在通话中。随着H5页面的发展越来越方便，许多场景从客户端转移到浏览器上。支付场景自然地放在浏览器中，所以这种输入框对每个人都不会陌生：

今天，我将使用Javaｓｃｒｉｐｔ代码来实现这个效果。首先，介绍整个想法。首先，我们将确定输入密码的数量，我的要求是5位。然后，我使用div标记包装5个输入标记。
并设置显示：5个输入的内联块属性，并消除元素的直接边距值，然后HTML如下：
- <！
> <—！
> <—！
> <—！
->
在代码中，我们需要设置输入位数的最大值，否则它就不象它了。当然，为了在进入移动终端时调用数字键盘，我们还需要设置类型，然后下面是CSS样式代码，在这里我只举了一些代码，具体的高仿的图像其实并不在这里，它在这里。
输入{
显示：内联块；
最后一个孩子{
边境：PX固体#；
}
输入{
边境上：PX固体#；
底部边框：PX固体#；
左边界：PX固体#；
宽度：PX；
高度：PX；
大纲：无；
字体家族：继承；
字体大小：PX；
字体重量：继承；
文本对齐：中心；
线高：PX；
颜色：# CCC；
背景：RGBA（，，，）；
}
}
然后它是Javaｓｃｒｉｐｔ最关键的部分。
*密码形式模拟Alipay
* /
（函数，窗口，文档）{
var活动=，
inputbtn = document.queryselectorall（输入的）；
对于（var i =；i < inputbtn.length；i++）{
我inputbtn { }。addEventListener（听到咔哒声，函数（）{（）{
inputbtn { }（）重点活动；
}，假）；
我inputbtn { }。addEventListener（'focus'，函数（）{（）{
This.addEventListener（'keyup '，listenkeyup，假）；
}，假）；
我inputbtn { }。addEventListener（'blur，函数（）{（）{
This.removeEventListener（'keyup '，listenkeyup，假）；
}，假）；
}

*敲击键盘
* /
功能listenkeyup（）{
无功beginbtn = document.queryselector（' # beginbtn）；
如果（！IsNaN（的价值）this.value.length！=）{
如果（活动<）{
=主动；
}
inputbtn { }（）重点活动；
}（= =如果其他this.value.length）{
如果（活动>）{
=活动的；
}
inputbtn { }（）重点活动；
}
如果（=活动）{
无功_value = inputbtn { }的价值活动；
如果（beginbtn。classname'begin-no'isnan（_value）= =！= { _value。长！）
beginbtn.classname = 'begin；
BeginBtn.addEventListener（听到咔哒声，函数（）{（）{
Calculate.begin（）；
}，假）；
}
{人}
如果（beginbtn.classname = = 'begin）{
beginbtn.classname = 'begin-no；
}
}
}
}（窗口、文档）；
首先，我们在监听外部div，当用户选择div时，它将是输入集的焦点为活动，而活动是计数器，默认时间是第一个，这是0，当我们输入正确的数字时会增加活动。这将焦点向后移动，这样就完成一个向后移动功能的输入，并在同一时间，我们监控键盘上的退格键，然后当用户点击退格键，一个主动的减少，这个输入焦点移动了，当然，当输入失去焦点也删除上述监控事件绑定，以免造成多次触发的问题。
整体效果其实是梳理下来很简单，只需要移动一个控制的重点是好的，但我认为关键组件的CSS样式的模仿或以上~在Javaｓｃｒｉｐｔ逻辑并不是什么困难的~最后祝大家新年快乐~ ~ ~（* ^ __ ^ *）
以上代码为您简要介绍了javaｓｃｒｉｐｔ全程模仿支付宝密码输入框，希望大家喜欢。