現在很多時候大家付款的場景都是在手機上面，而隨著H5頁面的開發變得越來越方便，很多場景也從客戶端搬到了浏覽器中，其中支付這個場景就很自然的被放在了浏覽器中。那麼這樣的輸入框大家一定不會陌生吧：
那麼今天我就用JavaScript代碼來實現這個效果吧，那麼首先介紹一下整個的思路，首先我們先將確定輸入密碼的位數，我的需求是5位，那麼就用一個div標簽包住5個input標簽。
並且給這個5個input設置display: inline-block 屬性，同時用<!- ->來消除元素直接的margin值，那麼HTML就是如下的樣子：
<div class="input"> <input type="tel" placeholder="隨" maxlength=""><!- -><input type="tel" placeholder="機" maxlength=""><!- -><input type="tel" placeholder="" maxlength=""><!- -><input type="tel" placeholder="位" maxlength=""><!- -><input type="tel" placeholder="數" maxlength=""> </div>
在代碼中我們需要設置最多輸入的位數，不然就不像了嘛~當然為了在移動端輸入的時候能喚起數字鍵盤來，我們也需要設置type="tel"。那麼接下來就是CSS樣式的代碼了，這裡我就簡單的貼出一些代碼，具體高仿的像不像其實就是這裡了~
input {
display: inline-block;
&:last-child {
border-right: px solid #;
}
input {
border-top: px solid #;
border-bottom: px solid #;
border-left: px solid #;
width: px;
height: px;
outline:none;
font-family: inherit;
font-size: px;
font-weight: inherit;
text-align: center;
line-height: px;
color: #ccc;
background: rgba(,,,);
}
}
那麼接下來就是最關鍵的JavaScript部分了，
/**
* 模擬支付寶的密碼輸入形式
*/
(function (window, document) {
var active = ,
inputBtn = document.querySelectorAll('input');
for (var i = ; i < inputBtn.length; i++) {
inputBtn[i].addEventListener('click', function () {
inputBtn[active].focus();
}, false);
inputBtn[i].addEventListener('focus', function () {
this.addEventListener('keyup', listenKeyUp, false);
}, false);
inputBtn[i].addEventListener('blur', function () {
this.removeEventListener('keyup', listenKeyUp, false);
}, false);
}
/**
* 監聽鍵盤的敲擊事件
*/
function listenKeyUp() {
var beginBtn = document.querySelector('#beginBtn');
if (!isNaN(this.value) && this.value.length != ) {
if (active < ) {
active += ;
}
inputBtn[active].focus();
} else if (this.value.length == ) {
if (active > ) {
active -= ;
}
inputBtn[active].focus();
}
if (active >= ) {
var _value = inputBtn[active].value;
if (beginBtn.className == 'begin-no' && !isNaN(_value) && _value.length != ) {
beginBtn.className = 'begin';
beginBtn.addEventListener('click', function () {
calculate.begin();
}, false);
}
} else {
if (beginBtn.className == 'begin') {
beginBtn.className = 'begin-no';
}
}
}
})(window, document);
首先我們對最外層的div進行監聽，當發現用戶選擇div的時候就將input的焦點設置到active上面去，而這個active則是一個計數器，默認的時候是第一位的，也就是0，而當我們輸入了正確的數字後將會增加一個active，這樣input的焦點就會向後移動了，這樣就完成了輸入一個向後移動一位的功能了，而同時我們監聽鍵盤上的退格鍵，當用戶點擊了退格鍵之後就對active減一，這樣輸入框的焦點也就向前移動了，當然，當input失去焦點的時候我們也同時移除綁定在上面的監聽事件，這樣就不會造成多次觸發的問題了。
其實這樣梳理下來會發現整個效果還是很簡單的，只需要控制好一個焦點的移動就好了，而我覺得整個組件的重點還是在CSS樣式的模仿上面~畢竟JavaScript的邏輯沒有什麼難的~最後祝大家元旦快樂啦~(*^__^*) ~~
以上代碼給大家簡單介紹了JavaScript仿支付寶密碼輸入框的全部敘述，希望大家喜歡。