使用Vue的@keydown事件,监听方向键的按下,然后在方法中根据方向键的keyCode来判断是哪个方向键被按下,然后根据需要将焦点转移到下一个或上一个输入框。
时间: 2023-04-04 10:00:38 浏览: 155
可以使用以下代码实现:
<template>
<div>
<input v-model="input1" @keydown="handleKeyDown($event, 'input1')" />
<input v-model="input2" @keydown="handleKeyDown($event, 'input2')" />
<input v-model="input3" @keydown="handleKeyDown($event, 'input3')" />
</div>
</template>
<script>
export default {
data() {
return {
input1: '',
input2: '',
input3: ''
}
},
methods: {
handleKeyDown(event, inputName) {
if (event.keyCode === 38) { // 上箭头
this.focusPrevInput(inputName)
} else if (event.keyCode === 40) { // 下箭头
this.focusNextInput(inputName)
}
},
focusPrevInput(inputName) {
switch (inputName) {
case 'input2':
this.$refs.input1.focus()
break
case 'input3':
this.$refs.input2.focus()
break
default:
break
}
},
focusNextInput(inputName) {
switch (inputName) {
case 'input1':
this.$refs.input2.focus()
break
case 'input2':
this.$refs.input3.focus()
break
default:
break
}
}
}
}
</script>
阅读全文