京東淘寶的密碼輸入框功能點
實現思路
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 這里寫業務邏輯代碼 } }})以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
