快捷導(dǎo)航

JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果

更新時(shí)間：2018年08月18日 15:46:42 作者：coder丶東

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)淘寶京東6位數(shù)字支付密碼效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

京東淘寶的密碼輸入框功能點(diǎn)

只能輸入數(shù)字
只能輸入6位字符
每次輸入一個(gè)字符，對(duì)應(yīng)位置的小黑點(diǎn)顯示
每次刪除一個(gè)字符，對(duì)應(yīng)位置的小黑點(diǎn)消失

實(shí)現(xiàn)思路

1、寫好6位密碼輸入框的靜態(tài)樣式和html結(jié)構(gòu)
2、將密碼輸入框input定位到父容器，覆蓋之前寫好的6位密碼輸入框區(qū)域，并設(shè)置為透明
3、雖然設(shè)置了密碼輸入框?yàn)橥该?，但?dāng)密碼輸入框獲得焦點(diǎn)的時(shí)候，輸入框的光標(biāo)會(huì)顯示出來，并不是透明狀態(tài)。為了解決這個(gè)問題，暫時(shí)想到了兩種方法，第一種，利用css將光標(biāo)也設(shè)置為透明，不過這種方法有一定的兼容問題；第二種，當(dāng)輸入框獲得焦點(diǎn)的時(shí)候，將輸入框定位到屏幕外面，用戶看不到輸入框，自然也就看不到光標(biāo)在那里一閃一閃了。
4、對(duì)于用戶只能輸入數(shù)字的功能，這里用正則表達(dá)式就搞定了，如果用戶輸入了非數(shù)字字符，將input輸入框的值清空
5、對(duì)于用戶輸入超過6位字符的情況，利用字符串的截取方法截取input.value的前6位字符
6、循環(huán)遍歷圓點(diǎn)，將index小于input.value.length的圓點(diǎn)顯示出來
7、用戶輸入超過6個(gè)的數(shù)字的時(shí)候，你再去刪除，你會(huì)發(fā)現(xiàn)要?jiǎng)h除很多字符，那些小圓點(diǎn)才會(huì)相應(yīng)的消失，所以這里，將截取的6位字符賦值給input輸入框的值，讓input.value長度永遠(yuǎn)小于等于6

HTML結(jié)構(gòu)

父容器 input-ps 用于input輸入框的定位
一位密碼對(duì)應(yīng)一個(gè)input-ps-item和dot

<div class="input-ps">
  <div class="input-ps-item">
    <span class="dot"></span> //小圓點(diǎn)
  </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樣式自己定義就行，想要什么樣式自己寫～～～注意幾個(gè)關(guān)鍵點(diǎn)

dot初始狀態(tài)為隱藏狀態(tài)
input輸入框?yàn)榻^對(duì)定位，覆蓋在6個(gè)密碼塊上，設(shè)置為透明

.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節(jié)點(diǎn)
     */
    var dom = {
      $input_mima : document.getElementById("input-mima")      //隱藏起來的密碼輸入框
    }

    /**
     * 隱藏的密碼輸入框獲得焦點(diǎn)事件
     * 輸入框獲得焦點(diǎn)后，將輸入框的定位定到屏幕看不見的位置
     */
    dom.$input_mima.addEventListener("focus",function(){
      this.style.top = "-10000px";
    })
    /**
     * 隱藏的密碼輸入框失去焦點(diǎn)事件
     * 輸入框失去焦點(diǎn)后，將輸入框的定位定原來的位置
     */
    dom.$input_mima.addEventListener("blur",function(){
      this.style.top = "0";
    })
    /**
     * 隱藏的輸入框輸入值的事件
     * 判斷輸入的值中是否都是數(shù)字
     * 如果都是數(shù)字，截取最前面6位數(shù)字
     * 如果不全是數(shù)字，將輸入框中的值設(shè)置空
     * 遍歷dot點(diǎn)，將和輸入框內(nèi)值的長度一致的dot個(gè)數(shù)顯示出來
     *
     */
    dom.$input_mima.addEventListener("input",function(){
      var mima ;
      //正則判斷輸入的值是否全是數(shù)字
      if(/^[0-9]*$/.test(this.value)){
        mima = this.value.substring(0,6); //截取輸入框中值的前6個(gè)字符
        this.value = mima;         //將輸入框中的值設(shè)置位截取到的值
      }else{
        mima = "";
        this.value = mima;         //將輸入框的值設(shè)置位空
      }
      //遍歷圓點(diǎn)dot，將index小于密碼長度的圓點(diǎn)顯示出來。這里我是用的mui框架的遍歷方法，如果你用的不是mui框架，可以換成其他的方式遍歷，下面有一個(gè)原生JS的循環(huán)方法
      mui(".dot").each(function(index){
        if(index < mima.length){
          this.style.display = "block";
        }else{
          this.style.display = "none";
        }
      })
      //原生的循環(huán)方法 - ，-
      // 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";
      //   }
      // }

      //輸入的密碼達(dá)到6位之后判斷密碼是否正確，這邊模擬了一下正確密碼是123456的情況
      //密碼正確之后進(jìn)行你想要的操作
      //如果不希望輸入的密碼字符達(dá)到6位后自動(dòng)進(jìn)行業(yè)務(wù)邏輯的代碼，這部分可以不寫，將你的業(yè)務(wù)邏輯綁定到別的節(jié)點(diǎn)
      if(mima.length >=6){
        //TODO 這里寫業(yè)務(wù)邏輯代碼
        //模擬密碼
        if(mima == "123456"){
          //TODO 這里寫業(yè)務(wù)邏輯代碼
        }

      }
})

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: