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

應(yīng)用到項(xiàng)目中的效果如下。

一般操作：

粘貼效果：

方案選擇

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

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

顯然，這個(gè)方案并不合適。

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

當(dāng)然我們還要實(shí)現(xiàn)點(diǎn)擊任何一個(gè)輸入框時(shí)，將焦點(diǎn)移動(dòng)到第一個(gè)value為空的input上。另外，點(diǎn)擊退格鍵時(shí)，也要進(jìn)行焦點(diǎn)的改變。

測(cè)試后后發(fā)現(xiàn)，焦點(diǎn)的移動(dòng)，不會(huì)導(dǎo)致移動(dòng)端鍵盤的收起。最終我就決定使用這個(gè)方案了。

代碼實(shí)現(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' : @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]; // 最后一個(gè)碼，只允許輸入一個(gè)字符。 } 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(); } }, // 重置光標(biāo)位置。 resetCaret() { this.$refs.input[this.ctSize-1].focus(); }, onFocus() { // 監(jiān)聽 focus 事件，將光標(biāo)重定位到“第一個(gè)空白符的位置”。 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 === ’’) { // 刪除上一個(gè)input里的值，并對(duì)其focus。 if (index > 0) { this.ct[index - 1] = ’’; this.$refs.input[index - 1].focus(); } } }, sendCaptcha() { console.log(); this.msg = `發(fā)送驗(yàn)證碼到服務(wù)器：${this.ct.join(’’)}`; // 此時(shí)無法操作 input。。 this.loading = true; setTimeout(() => { this.msg = (’驗(yàn)證碼錯(cuò)誤’) this.loading = false; this.$nextTick(() => { this.reset(); }) }, 3000) }, reset() { // 重置。一般是驗(yàn)證碼錯(cuò)誤時(shí)觸發(fā)。 this.ct = this.ct.map(item => ’’); this.resetCaret(); } }}var Ctor = Vue.extend(Main)new Ctor().$mount(’#app’)

原理

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

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

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

對(duì)了，驗(yàn)證碼輸入錯(cuò)誤后，需要清除所有 input 的數(shù)據(jù)，并把焦點(diǎn)移動(dòng)到第一個(gè) input 上。

總結(jié)原理并不復(fù)，只是實(shí)現(xiàn)起來有點(diǎn)繁瑣。

我這個(gè)方案沒有進(jìn)行瀏覽器兼容，請(qǐng)大家在經(jīng)過充分的測(cè)試后再行使用。

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

以上就是Vue如何實(shí)現(xiàn)驗(yàn)證碼輸入交互的詳細(xì)內(nèi)容，更多關(guān)于vue 驗(yàn)證碼輸入交互的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！