TIM圖片20190802135238.png
最近在做登錄驗(yàn)證的時(shí)候衍菱，感覺單純的讓用戶輸入一串?dāng)?shù)據(jù)有點(diǎn)Low，突然又想起來(lái)馬爸爸的支付寶在付款輸密碼用的驗(yàn)證框非常有意思肩豁，于是就稍做借鑒和修改了一版出來(lái)脊串，下面放代碼。
1. 頁(yè)面布局 （包一層主要是為了解決IOS光標(biāo)移位的問(wèn)題）
<view class="check">
<input class="checkInput" ref="check1" type="number" focus maxlength="1" @input="checkInput(1)" />
</view>
<view class="check">
<input class="checkInput" ref="check2" type="number" maxlength="1" @input="checkInput(2)" />
</view>
<view class="check">
<input class="checkInput" ref="check3" type="number" maxlength="1" @input="checkInput(3)" />
</view>
<view class="check">
<input class="checkInput" ref="check4" type="number" maxlength="1" @input="checkInput(4)" />
</view>
<view class="check">
<input class="checkInput" ref="check5" type="number" maxlength="1" @input="checkInput(5)" />
</view>
<view class="check">
<input class="checkInput" ref="check6" type="number" maxlength="1" @input="checkInput(6)" />
</view>
2.CSS
.check {
height: 103upx;
width: 15%;
margin-left: 2upx;
border: 1px solid white;
display: inline-block;
color: white;
}
.checkInput {
padding: 32upx;
z-index: 999;
font-size: 0.75rem;
}
3.JS方法實(shí)現(xiàn)
checkInput(index) {
var nextIndex = 1;
//獲取當(dāng)前輸入值
let value = this.$refs["check" + index].inputValue;
if (value.trim() === "") {
nextIndex = index === 1 ? 1 : index - 1;
} else {
nextIndex = index + 1;
}
//nextIndex取值區(qū)間為1~7
//1~6可以視為驗(yàn)證碼的更改清钥，7為自動(dòng)提交
if (nextIndex === 7) {
this.checkLogin()
} else {
this.$refs["check" + nextIndex].$refs.input.focus()
}
},
缺點(diǎn):在未輸入任何數(shù)據(jù)時(shí)琼锋，中途退格會(huì)失效（可以考慮將focus改成select，如果大家有更好的方案祟昭，可以一起交流缕坎。）
