Bootstrap

vue,js,按下enter触发tab,按下回车模拟触发tab,vue回车切换到下一个input或select(回车代替tab功能),回车自动下一行功能

用回车键(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;  
	    }
	}
}
;