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…