Vue表单添加回车事件使下一个input获取焦点
话不多说,先贴代码:1、form表单代码<el-form ref="loginForm" :model="loginForm" :rules="loginRules" status-icon><el-form-item prop="username"><el-input v-model="loginForm.username" placeholder="请输入管理员账
·
话不多说,先贴代码:
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的时候,执行提交表单操作。
更多推荐
已为社区贡献15条内容
所有评论(0)