用回车键(Enter键)代替Tab键来实现表单元素(如输入框、选择器等)之间的切换行效果,需要监听输入框的keydown或keyup事件,并在检测到回车键(键码为13)时,模拟Tab键的行为
HTML
<el-form-item prop="account">
<el-input type="text" v-model="xxx" @keydown.enter.native='nextLine' placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="deskWork">
<el-select ref="loanStatusSelect" style="width: 100%" v-model="ruleForm.deskWork" filterable placeholder="请选择xxx" @keyup.enter.native="handleEnterKeydown" @change="onSelectChange">
<el-option v-for="item in dataList" :key="item.index" :label="item.name" :value="item.id">
<span style="float: left">{{ item.name}}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.id }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item prop="checkPass" style="margin: 0">
<el-input type="password" v-model="xxx" placeholder="密码" @keydown.native.enter="handleSubmit2"></el-input>
</el-form-item>
<el-form-item style="width: 100%; height: 11%">
<el-button type="primary" style="width: 100%" class="loginIn" @click.native.prevent="handleSubmit2" :loading="logining"> 登录 </el-button>
</el-form-item>
逻辑代码
export default {
data() {
return {
shouldFocusInput: false,
}
}
},
methods: {
function nextLine() {
// 使用 querySelectorAll 方法选择页面上所有 class 为 'el-input__inner' 的元素
const focusableElements = document.querySelectorAll('.el-input__inner');
// 遍历所有可聚焦元素
focusableElements.forEach((el, index) => {
// 为每个元素添加 keyup 事件监听器
el.addEventListener('keyup', function(event) {
// 判断用户是否按下了回车键
if (event.key === 'Enter' || event.keyCode === 13) {
// 阻止默认的回车行为(比如表单提交等)
event.preventDefault();
// 计算下一个可聚焦元素的索引,使用模运算 % 实现循环,当到达最后一个元素时,索引会回到0,即第一个元素
const nextIndex = (index + 1) % focusableElements.length;
// 将焦点移动到下一个可聚焦元素
focusableElements[nextIndex].focus();
}
});
});
}
onSelectChange(value) {
// 当选项改变时,设置标志位为true,表示接下来如果按下回车键,需要移动焦点
this.shouldFocusInput = true;
},
handleEnterKeydown(event){
//判断如果下拉框数据就一条,直接回车即可填入
if (this.dataList.length == 1) {
this.ruleForm.deskWork = this.dataList[0].id
//回车后关闭下拉框
this.$refs.loanStatusSelect.visible = false
}
// 阻止默认行为,防止下拉菜单被意外打开或关闭
event.preventDefault();
// 如果选项已经改变且应该移动焦点到输入框,则移动焦点
if (this.shouldFocusInput) {
this.$refs.nextInput.focus();
// 重置标志位,避免不必要的焦点移动
this.shouldFocusInput = false;
}
}
}