最近做一個(gè)H5的頁(yè)面焕刮，里面有個(gè)輸入驗(yàn)證碼交互，就是移動(dòng)端比較常見(jiàn)的那種驗(yàn)證碼輸入交互墙杯。就是那種配并，對(duì)，就是那種霍转，一個(gè)數(shù)字一個(gè)下劃線荐绝，移動(dòng)端非常常見(jiàn)的那種驗(yàn)證碼交互。實(shí)現(xiàn)過(guò)程中主要參考了美團(tuán)外賣(mài)安卓端的具體交互避消。
文章首發(fā)于我的 個(gè)人博客低滩。
應(yīng)用到項(xiàng)目中的效果如下召夹。
方案選擇
方案1：調(diào)整文字的間距
設(shè)置 input 的 letter-spacing 屬性，我們就可以讓驗(yàn)證碼之間有足夠大的空隙恕沫，然后再把底線改為有間隔的多個(gè)線段貌似就可以了监憎。
然而，這里會(huì)有一個(gè)問(wèn)題婶溯。就是光標(biāo)總是會(huì)在數(shù)字的左邊鲸阔，而我們希望的是輸入后的數(shù)字的中心位于原來(lái)光標(biāo)的位置。最終我放棄了這個(gè)方案迄委。
顯然褐筛，這個(gè)方案并不合適。
方案2：使用多個(gè) input
這就是我使用的方式叙身，也是接下來(lái)我要詳細(xì)講解的方案渔扎。主要原理是：使用多個(gè) input 元素，每個(gè) input 只能輸入一個(gè)數(shù)字信轿。當(dāng)通過(guò) 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)端鍵盤(pán)的收起琼蚯。最終我就決定使用這個(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"
: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]; // 最后一個(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)聽(tīng) 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í)無(wú)法操作 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)聽(tīng)輸入字符枢步。當(dāng)輸入后的字符不為空字符，我們會(huì)和 focus 事件一樣渐尿，重定位下一個(gè)需要聚焦的 input醉途。如果輸入的是多個(gè)字符（一般是是粘貼的緣故），就會(huì)把多出來(lái)的字符一個(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)起來(lái)有點(diǎn)繁瑣顷扩。
我這個(gè)方案沒(méi)有進(jìn)行瀏覽器兼容拐邪，請(qǐng)大家在經(jīng)過(guò)充分的測(cè)試后再行使用。
如果可以的話隘截，我還是推薦簡(jiǎn)單的一個(gè)輸入框方案扎阶，而不是選擇這種花里胡哨的交互。簡(jiǎn)單穩(wěn)妥的實(shí)現(xiàn)維護(hù)簡(jiǎn)單婶芭，也不會(huì)有太多意想不到的狀況东臀。因?yàn)轵?yàn)證碼輸入這里如果在某些瀏覽器上無(wú)法正確操作，對(duì)轉(zhuǎn)化率還是有很大影響的犀农。
