JS實現(xiàn)六位字符密碼輸入器功能
老規(guī)矩~ 上DEMO，過過癮先：六位字符密碼輸入器
再上源碼：六位字符密碼輸入器
從DEMO中我看可以看出，首先只能輸入六個字符，并且僅允許輸入數(shù)字，在輸入六位數(shù)字完成之后會自動執(zhí)行一個回調(diào)（DEMO中是將輸入結(jié)果顯示出來了）
一. 先說原理
首先呢，我們需要兩個東東：其一是一個真是的輸入框，即：真正處于焦點狀態(tài)并獲取用戶輸入的input；其二是一組偽輸入框，即：并沒有真正獲取焦點，但只是顯示了當(dāng)前輸入的值（當(dāng)然啦，密碼嘛，只有一個小黑點而已~）。
其次呢，我們需要簡單不懼一下，讓著一組（6個）偽造元素剛好重疊在真實輸入框的下方。如下：
邊距實際是沒有的啦~，途中只是為了看著更清晰一些。
另外，我們需要把頂層的真是輸入框opcity設(shè)為0，這樣其實呈現(xiàn)在用戶面前的就是這一組偽造的輸入框啦。
但是用戶其實再輸入的時候還是對真是輸入框進行操作，在之后我們在講用戶的輸入依次填寫到偽造輸入框里邊就可以嘍~
很簡單吧~
二. 碼代碼
首先初始化各個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();
}
}
最后我們輸入密碼當(dāng)然是要獲取的啦~，來一個獲取最終值的方法~
function getBoxInputValue(){
var realValue = "";
for(var i in this.bogusInputArr){
if(!this.bogusInputArr[i].value){
break;
}
realValue += this.bogusInputArr[i].value;
}
return realValue;
}
以上所述是小編給大家介紹的JS實現(xiàn)六位字符密碼輸入器功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
IE下的Range操作比Mozilla下強很多，這里只討論IE下的操作,這里選介紹幾個光標(biāo)定位的特點2006-10-10
JS實現(xiàn)的字符串?dāng)?shù)組去重功能小結(jié)
這篇文章主要介紹了JS實現(xiàn)的字符串?dāng)?shù)組去重功能,結(jié)合實例形式分析了javascript基于ES6、ES5、ES3及正則實現(xiàn)數(shù)組去重的相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
Javascript 實現(xiàn)廣告后加載 可加載百度谷歌聯(lián)盟廣告
本文主要介紹一種新的廣告后加載的方式，支持自定義HTML廣告、百度聯(lián)盟廣告和谷歌聯(lián)盟廣告。這種方式在頁面加載完成后執(zhí)行，不影響內(nèi)容的顯示，對用戶更加友好。2016-05-05
單線程的同步等待極大影響效率，任務(wù)不得不一個一個等待執(zhí)行，對于網(wǎng)頁應(yīng)用是無法接受的。所以Javascript使用事件循環(huán)機制來解決異步任務(wù)的問題。本文就來講講Javascript的事件循環(huán)機制，希望對你有所幫助2022-09-09
JavaScript是一門多范式的編程語言，其中函數(shù)式編程成為了一種受歡迎的范式之一，本文將帶您深入了解JavaScript函數(shù)式編程的核心概念和技術(shù)，需要的可以參考一下2023-06-06
?javascript數(shù)組中的lastIndexOf方法
這篇文章主要介紹了?javascript數(shù)組中的lastIndexOf方法,該方法可返回一個指定的字符串值最后出現(xiàn)的位置，在一個字符串中的指定位置從后向前搜索，下文詳細內(nèi)容需要的小伙伴可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了bootstrap實現(xiàn)tab選項卡切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
在前端開發(fā)中,我們經(jīng)常需要實現(xiàn)文件下載功能,例如下載用戶上傳的圖片、用戶生成的文件等,這篇文章主要給大家介紹了關(guān)于如何通過1分鐘快速了解js實現(xiàn)下載文件功能的4種方式,需要的朋友可以參考下2024-03-03
我們在做項目的時候，特別是注冊用戶的時候，基本上都需要有注冊協(xié)議之類的東西，那么我們?nèi)绾闻袛嘤脩羰欠窆催x了同意了此協(xié)議呢？2014-06-06
整理Javascript事件響應(yīng)學(xué)習(xí)筆記
整理Javascript事件響應(yīng)學(xué)習(xí)筆記，之前一系列的文章是跟我學(xué)習(xí)Javascript，本文就是進一步學(xué)習(xí)javascript流程控制語句，希望大家繼續(xù)關(guān)注2015-12-12