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

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

<p 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=""> 
</p>

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

那么接下來就是最關(guān)鍵的JavaScript部分了，

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

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com