Vue表单添加回车事件使下一个input获取焦点

 话不多说，先贴代码：

1、form表单代码：

给input绑定回车事件  @keydown.enter.native="nextFocus(0)"，参数为当前标签在表单内所处的索引。

<el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon>
    <el-form-item prop="username">
        <el-input v-model="loginForm.username" placeholder="请输入管理员账号" name="username" type="text" auto-complete="on" clearable @keydown.enter.native="nextFocus(0)"/>
    </el-form-item>
    <el-form-item prop="password">
        <el-input v-model="loginForm.password" placeholder="请输入密码" type="password" minlength="5" maxlength="16" name="password" auto-complete="off" clearable @keydown.enter.native="nextFocus(1)"/>
    </el-form-item>
    <el-form-item>
        <el-button id="loginBtn" size="medium" @click.native.prevent="submitForm" v-loading.fullscreen.lock="fullscreenLoading"  element-loading-text="拼命加载中">登录</el-button>
    </el-form-item>
</el-form>

2、JS函数

nextFocus(index){//按回车键，聚焦下一个input。
    if(index<1){
       this.$refs["loginForm"].$el[index+1].focus();
    }else{
       this.submitForm();
    }
                
}

这个表单比较简单，仅有2个输入框和1个登录按钮。2个输入框在form表单内标签的索引分别是0、1，登录按钮的索引是2。所以index<1的时候，执行聚焦input的操作；当index>=1的时候，执行提交表单操作。