uniapp 多个input框输入完成后自动跳转下一个，删除内容后回退到上一个

本文链接：https://blog.youkuaiyun.com/aa820t/article/details/111246465

本文介绍了如何使用Uniapp开发一个输入框，实现实时号码匹配，支持多输入框联动与删除操作的高效流程。通过监听input和keyup.delete事件，实现了内容输入与回退功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目是用于精准输入号码去做匹配的，在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框进行内容清空，以便输入新的内容