資訊專欄INFORMATION COLUMN
摘要：另外，我們需要把頂層的真是輸入框設為，這樣其實呈現在用戶面前的就是這一組偽造的輸入框啦。然后在用戶輸入時分別將用戶輸入輸入到偽造輸入框中最后我們輸入密碼當然是要獲取的啦，來一個獲取最終值的方法
老規矩~ 上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;
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87871.html
摘要：另外，我們需要把頂層的真是輸入框設為，這樣其實呈現在用戶面前的就是這一組偽造的輸入框啦。然后在用戶輸入時分別將用戶輸入輸入到偽造輸入框中最后我們輸入密碼當然是要獲取的啦，來一個獲取最終值的方法 老規矩~ 上DEMO，過過癮先：六位字符密碼輸入器再上源碼：六位字符密碼輸入器 從DEMO中我看可以看出，首先只能輸入六個字符，并且僅允許輸入數字，在輸入六位數字完成之后會自動執行一個回調（DE...
摘要：圖片來源可能大部分人都沒有意識到設置密碼不走心的嚴重性，直到熱心市民劉先生現身說法。網絡平臺上有超過萬個公開的密碼集。對其再次進行虛擬破解有助于提高個人密碼安全意識，防范真實密碼破譯攻擊。萬個密碼中被破解。 全文共2512字，預計學習時長4分鐘 showImg(https://segmentfault.com/img/bVbvMv8); 事情是這樣發生的。 在某個陽光明媚的下午，熱心市...
摘要：微信任意用戶密碼修改漏洞漏洞描述在微信官方的首頁上發現了找回密碼功能。選擇通過手機號碼找回密碼。提交成功，輸入新密碼。網易郵箱可直接修改其他用戶密碼描述這次我們看一個郵箱的找回密碼漏洞，這個還真和上面的方式有點不一樣。 來自 GitChat 作者：湯青松更多使用技術，盡在微信公眾號：GitChat技術雜談 進入 GitChat 閱讀原文 WEB安全用戶密碼找回多案例安全攻防實戰 這次文...
閱讀 2446·2021-10-13 09:40
閱讀 3334·2019-08-30 13:46
閱讀 1120·2019-08-29 14:05
閱讀 2953·2019-08-29 12:48
閱讀 3654·2019-08-26 13:28
閱讀 2142·2019-08-26 11:34
閱讀 2277·2019-08-23 18:11
閱讀 1156·2019-08-23 12:26
