技術標籤：jsvueuni-appjavascriptvue.js

專案是用於精準輸入號碼去做匹配的，在uniapp裡 多個input框輸入完成後自動跳轉下一個，刪除內容後回退到上一個

話不多說，上程式碼看吧

模板部分程式碼：

<view class="phone-num-input-box u-flex u-row-between">
	<input type="number" class="phone-num-input" :disabled="index==0" :class="{'u-m-l-10': index==3||index==7}" maxlength="1" v-model="phone_num[index]"
	 v-for="(item,index) in phone_num" :key="index" :id="'input-'+ index" :focus="focus_index == index"
	 autocomplete="off" autocapitalize="off" autocorrect="off" @keyup.delete="funDeletePhoneNum"
	 @input="funInputPhoneNum" @focus="funFocusInput">
</view>
 

data部分程式碼：

focus_index: -1,
phone_num: {0:'1', 1:'', 2:'', 3:'', 4:'', 5:'',6: '', 7:'', 8:'', 9:'', 10:''},

methods部分程式碼：

funInputPhoneNum(e) {
	var index = (e.target.id).replace('input-', '');
	var value = e.detail.value;
	if (index != '10' && value != '') {
		this.focus_index = Number(index) + 1
	}
},
funDeletePhoneNum(e) {
	var index = (e.target.id).replace('input-', '');
	if (this.phone_num[index] == '' && index > 1 ) {
		this.focus_index = Number(index) - 1;
	}
},
funFocusInput(e){
	var index = (e.target.id).replace('input-', '');
	if(this.phone_num[index] != ''){
		this.phone_num[index] = '';
	}
},
 

實現原理：

@input事件 監聽 輸入框輸入內容後，通過設定focus_index使得 input框聚焦到下一個input框；

@keyup.delete事件 監聽輸入按鍵後，聚焦的上一個input框

@focus事件 配合 任意選擇有內容的input框進行內容清空，以便輸入新的內容