Web 端 實現 app “輸入驗證碼 ”的效果

Web 端 實現 app “輸入驗證碼 ”的效果

github.com/useryangtao…

起因 （只是因為在微信上多嘮了兩句...）

前兩天跟一個哥們嘮嗑，討論怎麼實現uber, 滴滴的驗證碼輸入的效果。

初構思

方案1:

有打算一個input然後兩條線段之間用白背景的線段遮住實現，用letter-spacing控制字間距。

但是控制數字間距吃力點，效果不佳便放棄。

方案2:

使用label標籤做顯示驗證碼的框，

然後每個label for屬性指向同一個 id 為vcode 的input，

為了能夠觸發input焦點， 將input 改透明度樣式隱藏，

這樣就實現了 點選label觸發 input焦點，呼叫鍵盤。

實現 （後來~ 終於在眼淚中實現... * *）

最後嘗試選擇了 方案2

實現效果

覺得游標效果挺有意思的，便用 animate 搞了下

結構

<div class="v-code">
<input type="tel" id="vcode" />

<label for="vcode"></label>
<label... * 5(取決於驗證碼長度 4 or 6)

</div>

複製程式碼

樣式

此處省略 ... 詳見 cursor-vcode

邏輯

接下來就是實現 讓 label 與 input 的 value 對應，這裡依賴 vue 簡單實現下思路

(vue好用不上火，哈哈哈~ ? ? ?)

html繫結

<div id="app">
    <div class="v-code">
      <input
      ref="vcode"
      id="vcode"
      type="tel"
      maxlength="6"
      v-model="code"
      @focus="focused = true"
      @blur="focused = false"
      :disabled="telDisabled">

      <label
        for="vcode"
        class="line"
        v-for="item,index in codeLength"
        :class="{'animated': focused && cursorIndex === index}"
        v-text="codeArr[index]"
        >
      </label>
    </div>
</div>
複製程式碼

javascript

var app = new Vue({
    el: '#app',
    data: {
      code: '', // input value
      codeLength: 6, // 驗證碼長度
      telDisabled: false, // 判斷是否輸入完
      focused: false // 讓input焦點, 決定游標顯示所在的位置
    },
    computed: {
      codeArr() {
        // 將 input value 分隔陣列 [1, 2, 3]
        return this.code.split('')
      },
      cursorIndex() {
        // 判斷code輸入長度，游標顯示在對應label上
        return this.code.length
      }
    },
    watch: {
      code(newVal) {
        //限制 非數字
        this.code = newVal.replace(/[^\d]/g,'')
        if (newVal.length > 5) {
        // 禁用 input && 失去焦點 讓鍵盤消失
          this.telDisabled = true
          this.$refs.vcode.blur()
        // submit !!!
          setTimeout(() => {
            alert(`vcode: ${this.code}`)
          }, 500)
        }
      }
    },
    mounted() {}
  })
複製程式碼

考慮互動，在裡面多做了部分細節及限制，慢慢品味~

如有雷同，百分百巧合

預覽

github地址:

github.com/useryangtao…