开发过程中碰到el-dialog中使用的form组件，按下键盘tab键不会切换到下一个，普通页面就正常切换。
解决办法
<ElInputref="newPWDInput"v-model="newPWD":clearable="true":maxlength="16":tabindex="2":type="passwordVisible ? 'text' : 'password'"oncopy="return false"oncut="return false"placeholder="设置新密码"@keydown.tab="handleTab($event, 'repeatPWDInput')"><!-- 省略其他代码 --></ElInput>
</ElFormItem>
<ElFormItem:prop="'repeatPWD'":rules="[{validator: validateRepeatPWD,trigger: ['blur'],},]"
><ElInputref="repeatPWDInput"v-model="repeatPWD":clearable="true":maxlength="16":tabindex="3"oncopy="return false"oncut="return false":type="rePasswordVisible ? 'text' : 'password'"placeholder="请再次输入密码"@keyup.enter="onConfirm"@keydown.tab="handleTab($event, 'newPWDInput')"><!-- 省略其他代码 --></ElInput>
<script setup lang="ts">
import { ref } from 'vue';
// 省略其他导入代码const newPWDInput = ref(null);
const repeatPWDInput = ref(null);const handleTab = (event, nextInputRef) => {event.preventDefault(); // 阻止默认的 Tab 键行为if (nextInputRef === 'newPWDInput') {newPWDInput.value.focus();} else if (nextInputRef === 'repeatPWDInput') {repeatPWDInput.value.focus();}
};// 省略其他代码
</script>
这样只适合input框少的时候解决办法，多的情况下就得考虑别的方案了。
大家有没有好的办法呢？
)
)
