现在大部分的支付场景都在手机上。随着H5页面的发展越来越便捷，很多场景从客户端转移到了浏览器，支付场景自然也就放在了浏览器中。那么你一定很熟悉这样一个输入框：

今天我就用JavaScript代码来达到这个效果。首先，我将介绍整个想法。首先，我们将确定输入密码的位数。我的要求是5位数。然后我将用一个div标签包装5个输入标签。

并为这五个输入设置display:内联块属性，然后使用！-为了消除元素的直接边距值，HTML如下所示：

div class=' input ' input type=' tel ' placeholder=' with ' maxlength=' '！-输入类型=' tel '占位符=' machine' maxlength=' '！--输入类型='tel '占位符maxlength='！-输入类型=' tel '占位符=' bit' maxlength=' '！-输入类型='tel '占位符=' number' maxlength='' /div在代码中，我们需要设置输入位数的最大值，否则会有所不同~当然，为了在移动终端上输入时唤起数字键盘，我们还需要设置类型=' tel '。然后就是CSS样式的代码。这里我简单的贴一些代码。具体模仿是不是这样其实就在这里~

输入{ display : inline-block； last-child { border-right : px solid #；}输入{ border-top: px实线#；边框-bottom: px实心#；边框-left: px实心#；宽度：像素；高度：像素；outline:nonefont-family:继承；font-size : px；font-weight:继承；文本对齐：中心；线高：像素；color: # cccbackground: rgba(，)；}}那么JavaScript最关键的部分就是接下来。

/* * *模拟支付宝的密码输入表单*/(函数(窗口、文档){varactive=，input TN=document . queryselectorall(' input ')；对于(var I=；输入长度；i ) { inputBtn[i]。addEventListener('click ')，function(){ inputtbtn[active]。焦点()；}，false)；输入tn[i]。addEventListener('focus '，function(){ this . addEventListener(' key up '，listenKeyUp，false)；}，false)；输入tn[i]。addEventListener('blur '，function(){ this . removeeventlistener(' keyup '，listenKeyUp，false)；}，false)；}/* * *监听键盘敲击事件*/function listen keyup(){ var begin BTN=document . query selector(# begin BTN ')；if(！isNaN(this . value)this . value . length！=){ if(active){ active=；} InputBtn[活动]。焦点()；} else if(this . value . length==){ if(active){ active-=；} InputBtn[活动]。焦点()；} if(active=){ var _ value=InputBtn[active]。价值；if(Begintn . class name=' begin-no '！isNaN(_value) _value.length！=){ begintn . class name=' begin '；begintn . addeventlistener(' click '，function(){ calculate . begin()；}，false)；} } else { if(Begintn . class name=' begin '){ Begintn . class name=' begin-no '；} } } })(窗口、文档)；首先，我们监视最外面的div，当我们发现用户选择了div时，我们将输入的焦点设置为active，这是一个计数器。默认是第一位数字，也就是0，当我们输入正确的数字时，我们会添加一个active，这样输入的焦点就会向后移动。这样，就完成了输入一位和向后移动一位的功能。同时，我们监视键盘上的退格键，当用户点击退格键时，我们从active中减去一，这样输入框的焦点就向前移动了。当然，当输入失去焦点的时候，我们也去掉了绑定在上面的监控事件，以免造成多次触发。

其实这样梳理之后，你会发现整个效果还是很简单的，只需要控制一个焦点的移动就可以了，而且我觉得整个组件的重点还是在模仿CSS的风格上~毕竟JavaScript的逻辑并不难~最后祝大家元旦快乐~ (* _ _ *) ~ ~

上面的代码给大家简单介绍了一下模仿支付宝密码输入框的JavaScript的整个叙述。希望你喜欢。