我的前端故事----高仿支付宝密码输入框

一个半月了，都感觉写博客有些生疏了。这次换成了word2016来写，也不知道版式会怎么样。。。大家就将就着看吧~离上次写摇骰子已经过去了一个多月了，期间经过了双十一和双十二的活动，又积攒了一些素材，又可以有的记录咯~

    但是因为人太懒了。。。很多的东西都没有整理出来，这次就介绍一个现在很多前端都在用的效果吧，希望能给即将做毕设的各位小伙伴一点帮助吧~

    现在很多时候大家付款的场景都是在手机上面，而随着H5页面的开发变得越来越方便，很多场景也从客户端搬到了浏览器中，其中支付这个场景就很自然的被放在了浏览器中。那么这样的输入框大家一定不会陌生吧：

    那么今天我就用JavaScript代码来实现这个效果吧，那么首先介绍一下整个的思路，首先我们先将确定输入密码的位数，我的需求是5位，那么就用一个div标签包住5个input标签。

并且给这个5个input设置display: inline-block 属性，同时用<!- ->来消除元素直接的margin值，那么HTML就是如下的样子：

1. <div class="input">
2.     <input type="tel" placeholder="随" maxlength="1"><!-
3.   -><input type="tel" placeholder="机" maxlength="1"><!-
4.   -><input type="tel" placeholder="5" maxlength="1"><!-
5.   -><input type="tel" placeholder="位" maxlength="1"><!-
6.   -><input type="tel" placeholder="数" maxlength="1">
7. </div>

在代码中我们需要设置最多输入的位数，不然就不像了嘛~当然为了在移动端输入的时候能唤起数字键盘来，我们也需要设置type="tel"。那么接下来就是CSS样式的代码了，这里我就简单的贴出一些代码，具体高仿的像不像其实就是这里了~

1. .input {
2.     display: inline-block;
3.     &:last-child {
4.         border-right: 1px solid #999;
5.     }
6.     input {
7.         border-top: 1px solid #999;
8.         border-bottom: 1px solid #999;
9.         border-left: 1px solid #999;
10.         width: 45px;
11.         height: 45px;
12.         outline:none;
13.         font-family: inherit;
14.         font-size: 28px;
15.         font-weight: inherit;
16.         text-align: center;
17.         line-height: 45px;
18.         color: #c2c2c2;
19.         background: rgba(255,255,255,0);
20.     }
21. }

那么接下来就是最关键的JavaScript部分了，

1. /**
2.  * 模拟支付宝的密码输入形式
3.  */
4. (function (window, document) {
5.     var active = 0,
6.         inputBtn = document.querySelectorAll('input');
7.     for (var i = 0; i < inputBtn.length; i++) {
8.         inputBtn[i].addEventListener('click', function () {
9.             inputBtn[active].focus();
10.         }, false);
11.         inputBtn[i].addEventListener('focus', function () {
12.             this.addEventListener('keyup', listenKeyUp, false);
13.         }, false);
14.         inputBtn[i].addEventListener('blur', function () {
15.             this.removeEventListener('keyup', listenKeyUp, false);
16.         }, false);
17.     }
18.  
19.     /**
20.      * 监听键盘的敲击事件
21.      */
22.     function listenKeyUp() {
23.         var beginBtn = document.querySelector('#beginBtn');
24.         if (!isNaN(this.value) && this.value.length != 0) {
25.             if (active < 4) {
26.                 active += 1;
27.             }
28.             inputBtn[active].focus();
29.         } else if (this.value.length == 0) {
30.             if (active > 0) {
31.                 active -= 1;
32.             }
33.             inputBtn[active].focus();
34.         }
35.         if (active >= 4) {
36.             var _value = inputBtn[active].value;
37.             if (beginBtn.className == 'begin-no' && !isNaN(_value) && _value.length != 0) {
38.                 beginBtn.className = 'begin';
39.                 beginBtn.addEventListener('click', function () {
40.                     calculate.begin();
41.                 }, false);
42.             }
43.         } else {
44.             if (beginBtn.className == 'begin') {
45.                 beginBtn.className = 'begin-no';
46.             }
47.         }
48.     }
49. })(window, document);

首先我们对最外层的div进行监听，当发现用户选择div的时候就将input的焦点设置到active上面去，而这个active则是一个计数器，默认的时候是第一位的，也就是0，而当我们输入了正确的数字后将会增加一个active，这样input的焦点就会向后移动了，这样就完成了输入一个向后移动一位的功能了，而同时我们监听键盘上的退格键，当用户点击了退格键之后就对active减一，这样输入框的焦点也就向前移动了，当然，当input失去焦点的时候我们也同时移除绑定在上面的监听事件，这样就不会造成多次触发的问题了。

其实这样梳理下来会发现整个效果还是很简单的，只需要控制好一个焦点的移动就好了，而我觉得整个组件的重点还是在CSS样式的模仿上面~毕竟JavaScript的逻辑没有什么难的~最后祝大家元旦快乐啦~(*^__^*) ~~

---jonnyf