JS實現六位字符密碼輸入器功能

老規矩~ 上DEMO，過過癮先：六位字符密碼輸入器

再上源碼：六位字符密碼輸入器

從DEMO中我看可以看出，首先只能輸入六個字符，並且僅允許輸入數字，在輸入六位數字完成之後會自動執行一個回調（DEMO中是將輸入結果顯示出來了）

一. 先說原理

首先呢，我們需要兩個東東：其一是一個真是的輸入框，即：真正處於焦點狀態並獲取用戶輸入的input；其二是一組偽輸入框，即：並沒有真正獲取焦點，但只是顯示了當前輸入的值（當然啦，密碼嘛，只有一個小黑點而已~）。

其次呢，我們需要簡單不懼一下，讓著一組（6個）偽造元素剛好重疊在真實輸入框的下方。如下：

邊距實際是沒有的啦~，途中只是為了看著更清晰一些。

另外，我們需要把頂層的真是輸入框opcity設為0，這樣其實呈現在用戶面前的就是這一組偽造的輸入框啦。

但是用戶其實再輸入的時候還是對真是輸入框進行操作，在之後我們在講用戶的輸入依次填寫到偽造輸入框裡邊就可以嘍~

很簡單吧~

二. 碼代碼

首先初始化各個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();}}

然後在用戶輸入時分別將用戶輸入輸入到偽造輸入框中

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

最後我們輸入密碼當然是要獲取的啦~，來一個獲取最終值的方法~

 function getBoxInputValue(){var realValue = "";for(var i in this.bogusInputArr){if(!this.bogusInputArr[i].value){break;}realValue += this.bogusInputArr[i].value;}return realValue;}

以上所述是小編給大家介紹的JS實現六位字符密碼輸入器功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！