溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
京東淘寶的密碼輸入框功能點
實現思路
1、寫好6位密碼輸入框的靜態樣式和html結構
2、將密碼輸入框input定位到父容器，覆蓋之前寫好的6位密碼輸入框區域，并設置為透明
3、雖然設置了密碼輸入框為透明，但當密碼輸入框獲得焦點的時候，輸入框的光標會顯示出來，并不是透明狀態。為了解決這個問題，暫時想到了兩種方法，第一種，利用css將光標也設置為透明，不過這種方法有一定的兼容問題；第二種，當輸入框獲得焦點的時候，將輸入框定位到屏幕外面，用戶看不到輸入框，自然也就看不到光標在那里一閃一閃了。
4、對于用戶只能輸入數字的功能，這里用正則表達式就搞定了，如果用戶輸入了非數字字符，將input輸入框的值清空
5、對于用戶輸入超過6位字符的情況，利用字符串的截取方法截取input.value的前6位字符
6、循環遍歷圓點，將index小于input.value.length的圓點顯示出來
7、用戶輸入超過6個的數字的時候，你再去刪除，你會發現要刪除很多字符，那些小圓點才會相應的消失，所以這里，將截取的6位字符賦值給input輸入框的值，讓input.value長度永遠小于等于6
HTML結構
父容器 input-ps 用于input輸入框的定位
一位密碼對應一個input-ps-item和dot
<div class="input-ps">
<div class="input-ps-item">
<span class="dot"></span> //小圓點
</div>
<div class="input-ps-item">
<span class="dot"></span>
</div>
<div class="input-ps-item">
<span class="dot"></span>
</div>
<div class="input-ps-item">
<span class="dot"></span>
</div>
<div class="input-ps-item">
<span class="dot"></span>
</div>
<div class="input-ps-item last">
<span class="dot"></span>
</div>
<input id="input-mima" class="input-mima" type="text"/>
</div>
CSS樣式
css樣式自己定義就行，想要什么樣式自己寫～～～注意幾個關鍵點
dot初始狀態為隱藏狀態
input輸入框為絕對定位，覆蓋在6個密碼塊上，設置為透明
.input-ps{
position: relative;
display: flex;
align-items: center;
width: 8.28125rem;
height: 1.375rem;
margin: 0 auto;
border: 1px solid #d9d9d9;
border-radius: 0.1875rem;
background-color: #fff;
}
.input-ps-item{
display: flex;
justify-content: space-around;
align-items: center;
flex: 1;
height: 0.78125rem;
border-right: 1px solid #d9d9d9;
}
.last{
border: none;
}
.dot{
display: none;
width: 0.234375rem;
height: 0.234375rem;
border-radius: 0.234375rem;
background-color: #363e49;
}
.input-mima{
position: absolute;
left: 0;
top: 0;
height: 1.375rem !important;
color: transparent;
opacity: 0;
}
JS腳本
/**
* 獲取dom節點
*/
var dom = {
$input_mima : document.getElementById("input-mima") //隱藏起來的密碼輸入框
}
/**
* 隱藏的密碼輸入框獲得焦點事件
* 輸入框獲得焦點后，將輸入框的定位定到屏幕看不見的位置
*/
dom.$input_mima.addEventListener("focus",function(){
this.style.top = "-10000px";
})
/**
* 隱藏的密碼輸入框失去焦點事件
* 輸入框失去焦點后，將輸入框的定位定原來的位置
*/
dom.$input_mima.addEventListener("blur",function(){
this.style.top = "0";
})
/**
* 隱藏的輸入框輸入值的事件
* 判斷輸入的值中是否都是數字
* 如果都是數字，截取最前面6位數字
* 如果不全是數字，將輸入框中的值設置空
* 遍歷dot點，將和輸入框內值的長度一致的dot個數顯示出來
*
*/
dom.$input_mima.addEventListener("input",function(){
var mima ;
//正則判斷輸入的值是否全是數字
if(/^[0-9]*$/.test(this.value)){
mima = this.value.substring(0,6); //截取輸入框中值的前6個字符
this.value = mima; //將輸入框中的值設置位截取到的值
}else{
mima = "";
this.value = mima; //將輸入框的值設置位空
}
//遍歷圓點dot，將index小于密碼長度的圓點顯示出來。這里我是用的mui框架的遍歷方法，如果你用的不是mui框架，可以換成其他的方式遍歷，下面有一個原生JS的循環方法
mui(".dot").each(function(index){
if(index < mima.length){
this.style.display = "block";
}else{
this.style.display = "none";
}
})
//原生的循環方法 - ，-
// var dot_list = document.getElementsByClassName("dot");
// for(var index =0;index<dot_list.length;index++){
// if(index < mima.length){
// dot_list[index].style.display = "block";
// }else{
// dot_list[index].style.display = "none";
// }
// }
//輸入的密碼達到6位之后判斷密碼是否正確，這邊模擬了一下正確密碼是123456的情況
//密碼正確之后進行你想要的操作
//如果不希望輸入的密碼字符達到6位后自動進行業務邏輯的代碼，這部分可以不寫，將你的業務邏輯綁定到別的節點
if(mima.length >=6){
//TODO 這里寫業務邏輯代碼
//模擬密碼
if(mima == "123456"){
//TODO 這里寫業務邏輯代碼
}
}
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
