老規(guī)矩~ 上DEMO，過(guò)過(guò)癮先：六位字符密碼輸入器
再上源碼：六位字符密碼輸入器
從DEMO中我看可以看出，首先只能輸入六個(gè)字符，并且僅允許輸入數(shù)字，在輸入六位數(shù)字完成之后會(huì)自動(dòng)執(zhí)行一個(gè)回調(diào)（DEMO中是將輸入結(jié)果顯示出來(lái)了）
一. 先說(shuō)原理
首先呢，我們需要兩個(gè)東東：其一是一個(gè)真是的輸入框，即：真正處于焦點(diǎn)狀態(tài)并獲取用戶(hù)輸入的input；其二是一組偽輸入框，即：并沒(méi)有真正獲取焦點(diǎn)，但只是顯示了當(dāng)前輸入的值（當(dāng)然啦，密碼嘛，只有一個(gè)小黑點(diǎn)而已~）。
其次呢，我們需要簡(jiǎn)單不懼一下，讓著一組（6個(gè)）偽造元素剛好重疊在真實(shí)輸入框的下方。如下：
邊距實(shí)際是沒(méi)有的啦~，途中只是為了看著更清晰一些。
另外，我們需要把頂層的真是輸入框opcity設(shè)為0，這樣其實(shí)呈現(xiàn)在用戶(hù)面前的就是這一組偽造的輸入框啦。
但是用戶(hù)其實(shí)再輸入的時(shí)候還是對(duì)真是輸入框進(jìn)行操作，在之后我們?cè)谥v用戶(hù)的輸入依次填寫(xiě)到偽造輸入框里邊就可以嘍~
很簡(jiǎn)單吧~
二. 碼代碼
首先初始化各個(gè)DOM，以及綁定輸入事件。
function init(fun){var that = this;this.callback = fun;that.realInput = container.children[0];that.bogusInput = container.children[1];that.bogusInputArr = that.bogusInput.children;that.maxLength = that.bogusInputArr[0].getAttribute("maxlength");that.realInput.oninput = function(){that.setValue();}that.realInput.onpropertychange = function(){that.setValue();}}然后在用戶(hù)輸入時(shí)分別將用戶(hù)輸入輸入到偽造輸入框中
function setValue(){this.realInput.value = this.realInput.value.replace(//D/g,"");console.log(this.realInput.value.replace(//D/g,""))var real_str = this.realInput.value;for(var i = 0 ; i < this.maxLength ; i++){this.bogusInputArr[i].value = real_str[i]?real_str[i]:"";}if(real_str.length >= this.maxLength){this.realInput.value = real_str.substring(0,6);this.callback();}}最后我們輸入密碼當(dāng)然是要獲取的啦~，來(lái)一個(gè)獲取最終值的方法~
function getBoxInputValue(){var realValue = "";for(var i in this.bogusInputArr){if(!this.bogusInputArr[i].value){break;}realValue += this.bogusInputArr[i].value;}return realValue;}以上所述是小編給大家介紹的JS實(shí)現(xiàn)六位字符密碼輸入器功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
