快捷導(dǎo)航

JavaScript仿支付寶密碼輸入框

更新時(shí)間：2015年12月29日 09:17:41 作者：F-happy

那么今天我就用JavaScript代碼來(lái)實(shí)現(xiàn)這個(gè)效果吧，那么首先介紹一下整個(gè)的思路，首先我們先將確定輸入密碼的位數(shù)，我的需求是5位，那么就用一個(gè)div標(biāo)簽包住5個(gè)input標(biāo)簽

現(xiàn)在很多時(shí)候大家付款的場(chǎng)景都是在手機(jī)上面，而隨著H5頁(yè)面的開(kāi)發(fā)變得越來(lái)越方便，很多場(chǎng)景也從客戶端搬到了瀏覽器中，其中支付這個(gè)場(chǎng)景就很自然的被放在了瀏覽器中。那么這樣的輸入框大家一定不會(huì)陌生吧：

那么今天我就用JavaScript代碼來(lái)實(shí)現(xiàn)這個(gè)效果吧，那么首先介紹一下整個(gè)的思路，首先我們先將確定輸入密碼的位數(shù)，我的需求是5位，那么就用一個(gè)div標(biāo)簽包住5個(gè)input標(biāo)簽。

并且給這個(gè)5個(gè)input設(shè)置display: inline-block 屬性，同時(shí)用<!- ->來(lái)消除元素直接的margin值，那么HTML就是如下的樣子：

<div class="input"> 
<input type="tel" placeholder="隨" maxlength=""><!- 
-><input type="tel" placeholder="機(jī)" maxlength=""><!- 
-><input type="tel" placeholder="" maxlength=""><!- 
-><input type="tel" placeholder="位" maxlength=""><!- 
-><input type="tel" placeholder="數(shù)" maxlength=""> 
</div>

在代碼中我們需要設(shè)置最多輸入的位數(shù)，不然就不像了嘛~當(dāng)然為了在移動(dòng)端輸入的時(shí)候能喚起數(shù)字鍵盤來(lái)，我們也需要設(shè)置type="tel"。那么接下來(lái)就是CSS樣式的代碼了，這里我就簡(jiǎn)單的貼出一些代碼，具體高仿的像不像其實(shí)就是這里了~

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(,,,); 
} 
}

那么接下來(lái)就是最關(guān)鍵的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); 
} 
/** 
* 監(jiān)聽(tīng)鍵盤的敲擊事件 
*/ 
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);

首先我們對(duì)最外層的div進(jìn)行監(jiān)聽(tīng)，當(dāng)發(fā)現(xiàn)用戶選擇div的時(shí)候就將input的焦點(diǎn)設(shè)置到active上面去，而這個(gè)active則是一個(gè)計(jì)數(shù)器，默認(rèn)的時(shí)候是第一位的，也就是0，而當(dāng)我們輸入了正確的數(shù)字后將會(huì)增加一個(gè)active，這樣input的焦點(diǎn)就會(huì)向后移動(dòng)了，這樣就完成了輸入一個(gè)向后移動(dòng)一位的功能了，而同時(shí)我們監(jiān)聽(tīng)鍵盤上的退格鍵，當(dāng)用戶點(diǎn)擊了退格鍵之后就對(duì)active減一，這樣輸入框的焦點(diǎn)也就向前移動(dòng)了，當(dāng)然，當(dāng)input失去焦點(diǎn)的時(shí)候我們也同時(shí)移除綁定在上面的監(jiān)聽(tīng)事件，這樣就不會(huì)造成多次觸發(fā)的問(wèn)題了。

其實(shí)這樣梳理下來(lái)會(huì)發(fā)現(xiàn)整個(gè)效果還是很簡(jiǎn)單的，只需要控制好一個(gè)焦點(diǎn)的移動(dòng)就好了，而我覺(jué)得整個(gè)組件的重點(diǎn)還是在CSS樣式的模仿上面~畢竟JavaScript的邏輯沒(méi)有什么難的~最后祝大家元旦快樂(lè)啦~(*^__^*) ~~

以上代碼給大家簡(jiǎn)單介紹了JavaScript仿支付寶密碼輸入框的全部敘述，希望大家喜歡。

您可能感興趣的文章: