我的前端故事----高仿支付寶密碼輸入框

一個半月了，都感覺寫博客有些生疏了。這次換成了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