摘要:另外,我們需要把頂層的真是輸入框設(shè)為,這樣其實(shí)呈現(xiàn)在用戶面前的就是這一組偽造的輸入框啦。然后在用戶輸入時(shí)分別將用戶輸入輸入到偽造輸入框中最后我們輸入密碼當(dāng)然是要獲取的啦,來一個(gè)獲取最終值的方法
老規(guī)矩~ 上DEMO,過過癮先:六位字符密碼輸入器
再上源碼:六位字符密碼輸入器
從DEMO中我看可以看出,首先只能輸入六個(gè)字符,并且僅允許輸入數(shù)字,在輸入六位數(shù)字完成之后會自動(dòng)執(zhí)行一個(gè)回調(diào)(DEMO中是將輸入結(jié)果顯示出來了)
一. 先說原理首先呢,我們需要兩個(gè)東東:其一是一個(gè)真是的輸入框,即:真正處于焦點(diǎn)狀態(tài)并獲取用戶輸入的input;其二是一組偽輸入框,即:并沒有真正獲取焦點(diǎn),但只是顯示了當(dāng)前輸入的值(當(dāng)然啦,密碼嘛,只有一個(gè)小黑點(diǎn)而已~)。
其次呢,我們需要簡單不懼一下,讓著一組(6個(gè))偽造元素剛好重疊在真實(shí)輸入框的下方。如下:
邊距實(shí)際是沒有的啦~,途中只是為了看著更清晰一些。
另外,我們需要把頂層的真是輸入框opcity設(shè)為0,這樣其實(shí)呈現(xiàn)在用戶面前的就是這一組偽造的輸入框啦。
但是用戶其實(shí)再輸入的時(shí)候還是對真是輸入框進(jì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(); } }
然后在用戶輸入時(shí)分別將用戶輸入輸入到偽造輸入框中
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)然是要獲取的啦~,來一個(gè)獲取最終值的方法~
function getBoxInputValue(){ var realValue = ""; for(var i in this.bogusInputArr){ if(!this.bogusInputArr[i].value){ break; } realValue += this.bogusInputArr[i].value; } return realValue; }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/49998.html
摘要:另外,我們需要把頂層的真是輸入框設(shè)為,這樣其實(shí)呈現(xiàn)在用戶面前的就是這一組偽造的輸入框啦。然后在用戶輸入時(shí)分別將用戶輸入輸入到偽造輸入框中最后我們輸入密碼當(dāng)然是要獲取的啦,來一個(gè)獲取最終值的方法 老規(guī)矩~ 上DEMO,過過癮先:六位字符密碼輸入器再上源碼:六位字符密碼輸入器 從DEMO中我看可以看出,首先只能輸入六個(gè)字符,并且僅允許輸入數(shù)字,在輸入六位數(shù)字完成之后會自動(dòng)執(zhí)行一個(gè)回調(diào)(DE...
摘要:圖片來源可能大部分人都沒有意識到設(shè)置密碼不走心的嚴(yán)重性,直到熱心市民劉先生現(xiàn)身說法。網(wǎng)絡(luò)平臺上有超過萬個(gè)公開的密碼集。對其再次進(jìn)行虛擬破解有助于提高個(gè)人密碼安全意識,防范真實(shí)密碼破譯攻擊。萬個(gè)密碼中被破解。 全文共2512字,預(yù)計(jì)學(xué)習(xí)時(shí)長4分鐘 showImg(https://segmentfault.com/img/bVbvMv8); 事情是這樣發(fā)生的。 在某個(gè)陽光明媚的下午,熱心市...
摘要:微信任意用戶密碼修改漏洞漏洞描述在微信官方的首頁上發(fā)現(xiàn)了找回密碼功能。選擇通過手機(jī)號碼找回密碼。提交成功,輸入新密碼。網(wǎng)易郵箱可直接修改其他用戶密碼描述這次我們看一個(gè)郵箱的找回密碼漏洞,這個(gè)還真和上面的方式有點(diǎn)不一樣。 來自 GitChat 作者:湯青松更多使用技術(shù),盡在微信公眾號:GitChat技術(shù)雜談 進(jìn)入 GitChat 閱讀原文 WEB安全用戶密碼找回多案例安全攻防實(shí)戰(zhàn) 這次文...
閱讀 1161·2021-11-16 11:45
閱讀 1016·2021-09-04 16:41
閱讀 3077·2019-08-29 16:40
閱讀 2852·2019-08-29 15:34
閱讀 2673·2019-08-29 13:11
閱讀 1734·2019-08-29 12:58
閱讀 1726·2019-08-28 18:00
閱讀 1776·2019-08-26 18:26