1) 页面内输入框,按键 tab 则 切换输入框, 按键 ↑↓ 则 加减数值
2) 思路
1、按键 tab切换input框，默认tab切换会聚焦到浏览器地址栏（F12时会聚焦到开发者工具选项），我们需要阻止该默认事件。
2、进入页面就聚焦到第一个输入框（ 用focus() ）；tab切换时，聚焦到下一个输入框；聚焦到最后一个输入框时，再tab切换，聚焦到第一个输入框
3、进入页面就监听tab事件，离开页面时移除监听事件。
3、使用el-input-number设置好属性，实现↑↓按键input框值加减
3) 简单的写一下.vue文件代码
前端代码在这里：GitHub - wwaini/tao-vue3 at release240625
<template><div>我是输入框,按键 tab 则 切换输入框, 按键 ↑↓ 则 加减数值</div><div v-for="item in list" :key="item.id"><el-input-number step-strictly ref="inputNumRef" v-model="item['num']" :min="0" :max="2" :step="0.5" /></div>
</template><script setup>
import { onMounted, onUnmounted, ref } from 'vue'
const list = ref([{ id: 1, num: 1 },{ id: 2, num: 2 },{ id: 2, num: 1 },{ id: 2, num: 1 },
])
const inputNumRef = ref([]) // 实例ref
const initNum = ref(0)// 让第某项获得焦点
const getFocus = (index) => {inputNumRef.value[index].focus()
}
onMounted(() => {getFocus(initNum.value)// 监听事件keydown,而不是keypress或keyup,因为无法阻止他们的默认事件window.addEventListener('keydown', handleKeyDown)
})
const handleKeyDown = (e) => {if (e.code === 'Tab') {// 阻止默认的Tab行为，如按tab会切换到地址栏e.preventDefault();initNum.value = initNum.value + 1// 超过输入框长度，则跳转到第一个输入框if (initNum.value == list.value.length) initNum.value = 0getFocus(initNum.value)}
}
onUnmounted(() => {// 有始有终，移除监听window.removeEventListener('keydown', handleKeyDown)
})
</script>
如有不足，欢迎指正。
不要忽视你达成的每个小练习，它是你前进路上的垫脚石。冲！
