vue iview input输入完成自动进入下一输入框

<div class="flex" v-for="(item,index) in bindingList" :key="index">
<div class="inputs">
<Input @on-keyup="nextinput(item.deviceInput1,index)" ref="inputOne" @on-blur="inputBlur('deviceInput1',index)" :maxlength="2" v-model="item.deviceInput1" style="width: 30px" />
<Input @on-keyup.delete="backspace(item.deviceInput2,index)" ref="inputTwo" @on-blur="inputBlur('deviceInput2',index)" :maxlength="2"
v-model="item.deviceInput2" style="width: 30px" />
</div>
</div>

//键盘输入事件
nextinput(item,index) {
if (item.length == 2) {
this.$nextTick(()=>{
this.$refs.inputTwo[index].focus();
})
}
},
//键盘删除触发事件
backspace(item,index){
if(item.length == 0){
this.$nextTick(()=>{
this.$refs.inputOne[index].focus();
})
}
},
//失去焦点时不足两位补零
inputBlur(type,index){
if(this.bindingList[index][type]){
this.bindingList[index][type] = this.bindingList[index][type].padStart(2,0)
}
},

最后

以上就是坦率狗为你收集整理的vue iview input输入完成自动进入下一输入框的全部内容，希望文章能够帮你解决vue iview input输入完成自动进入下一输入框所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。