Vue如何實現(xiàn)驗證碼輸入交互

更新時間：2020年12月07日 09:29:25 作者：Fstar

這篇文章主要介紹了Vue實現(xiàn)驗證碼輸入交互的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

最近做一個H5的頁面，里面有個輸入驗證碼交互，就是移動端比較常見的那種驗證碼輸入交互。就是那種，對，就是那種，一個數(shù)字一個下劃線，移動端非常常見的那種驗證碼交互。實現(xiàn)過程中主要參考了美團外賣安卓端的具體交互。

應用到項目中的效果如下。

一般操作：

粘貼效果：

方案選擇

方案1：調整文字的間距
設置 input 的 letter-spacing 屬性，我們就可以讓驗證碼之間有足夠大的空隙，然后再把底線改為有間隔的多個線段貌似就可以了。

然而，這里會有一個問題。就是光標總是會在數(shù)字的左邊，而我們希望的是輸入后的數(shù)字的中心位于原來光標的位置。最終我放棄了這個方案。

顯然，這個方案并不合適。

方案2：使用多個 input
這就是我使用的方式，也是接下來我要詳細講解的方案。主要原理是：使用多個 input 元素，每個 input 只能輸入一個數(shù)字。當通過 input 事件監(jiān)測到字符輸入時，自動將焦點對焦到下一個 input 元素。

當然我們還要實現(xiàn)點擊任何一個輸入框時，將焦點移動到第一個value為空的input上。另外，點擊退格鍵時，也要進行焦點的改變。

測試后后發(fā)現(xiàn)，焦點的移動，不會導致移動端鍵盤的收起。最終我就決定使用這個方案了。

代碼實現(xiàn)
在線示例：https://codepen.io/F-star/pen/dyyeZaN

HTML：

<div id="app">
 <div class="captcha">
  <input v-for="(c, index) in ct" :key="index"
   type="number" v-model="ct[index]" ref="input" 
   :style="{borderBottomColor: index <= cIndex ? '#333' : ''}"
   @input="e => {onInput(e.target.value, index)}" 
   @keydown.delete="e=>{onKeydown(e.target.value, index)}"
   @focus="onFocus"
   :disabled="loading"
   >
 </div>
 <p>{{msg}}</p>
</div>

CSS：

.captcha {
 display: flex;
 justify-content: center;
 margin-top: 40px;
}
input {
 margin-right: 20px;
 width: 45px;
 text-align: center;
 border: none;
 border-bottom: 1px solid #eee;
 font-size: 24px;
 outline: none;
}
input:last-of-type {
 margin-right: 0;
}
input:disabled {
 color: #000;
 background-color: #fff;
}
.msg {
 text-align: center;
}

JS：

var Main = {
 data() {
  return {
   ct: ['', '', '', '', '', ''],
   loading: false,
   msg: '',
  }
 },
 computed: {
  ctSize() {
   return this.ct.length;
  },
  cIndex() {
   let i = this.ct.findIndex(item => item === '');
   i = (i + this.ctSize) % this.ctSize;
   return i;
  },
  lastCode() {
   return this.ct[this.ctSize - 1];
  }
 },
 watch: {
  cIndex() {
   this.resetCaret();
  },
  lastCode(val) {
   if (val) {
    console.log('this.ctSize', this.ctSize)
    this.$refs.input[this.ctSize - 1].blur();
    this.sendCaptcha();
   }
  }
 },
 mounted() {
  this.resetCaret();
 },
 methods: {
  onInput(val, index) {
   this.msg = ''
   val = val.replace(/\s/g, '');
   if (index == this.ctSize - 1) {
    this.ct[this.ctSize - 1] = val[0];  // 最后一個碼，只允許輸入一個字符。
   } else if(val.length > 1) {
    let i = index;
    for (i = index; i < this.ctSize && i - index < val.length; i++) {
     this.ct[i] = val[i];
    }
    this.resetCaret();
   }
  },
  // 重置光標位置。
  resetCaret() {
   this.$refs.input[this.ctSize-1].focus();
  },
  onFocus() {
   // 監(jiān)聽 focus 事件，將光標重定位到“第一個空白符的位置”。
   let index = this.ct.findIndex(item => item === '');
   index = (index + this.ctSize) % this.ctSize;
   console.log(this.$refs.input)
   this.$refs.input[index].focus();
  },
  onKeydown(val, index) {
   if (val === '') {
    // 刪除上一個input里的值，并對其focus。
    if (index > 0) {
     this.ct[index - 1] = '';
     this.$refs.input[index - 1].focus();
    }
   }
  },
  sendCaptcha() {
   console.log();
   this.msg = `發(fā)送驗證碼到服務器：${this.ct.join('')}`;
   // 此時無法操作 input。。
   this.loading = true;
   setTimeout(() => {
    this.msg = ('驗證碼錯誤')
    this.loading = false;
    this.$nextTick(() => {
     this.reset();
    })
   }, 3000)
  },

  reset() {
   // 重置。一般是驗證碼錯誤時觸發(fā)。
   this.ct = this.ct.map(item => '');
   this.resetCaret();
  }
 }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

原理

創(chuàng)建多個 input 元素，對這些 input 都綁定 focus 事件。一旦觸發(fā)該事件，我們會把焦點移動到從左往右第一個 value 為空字符的 input 上。所以在初始狀態(tài)時，點擊最右邊的 input，光標還是會跑到最左邊的 input。

然后我們給這些 input 綁定 input 事件，監(jiān)聽輸入字符。當輸入后的字符不為空字符，我們會和 focus 事件一樣，重定位下一個需要聚焦的 input。如果輸入的是多個字符（一般是是粘貼的緣故），就會把多出來的字符一個一個按順序填入到后面的 input 中，然后才重定位光標。這樣，我們就實現(xiàn)了一個個輸入數(shù)字和粘貼短信驗證碼（一次性輸入多個數(shù)字）的交互。

最后我們還要處理退格行為，需要給所有 input 綁定 keydown 事件。當按下的為退格鍵，且當前 input 的 value 為空時，清空上一個 input 里的數(shù)據(jù)，并聚焦到上一個 input 上。

對了，驗證碼輸入錯誤后，需要清除所有 input 的數(shù)據(jù)，并把焦點移動到第一個 input 上。

總結
原理并不復，只是實現(xiàn)起來有點繁瑣。

我這個方案沒有進行瀏覽器兼容，請大家在經過充分的測試后再行使用。

如果可以的話，我還是推薦簡單的一個輸入框方案，而不是選擇這種花里胡哨的交互。簡單穩(wěn)妥的實現(xiàn)維護簡單，也不會有太多意想不到的狀況。因為驗證碼輸入這里如果在某些瀏覽器上無法正確操作，對轉化率還是有很大影響的。

以上就是Vue如何實現(xiàn)驗證碼輸入交互的詳細內容，更多關于vue 驗證碼輸入交互的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: