vue+element通过回车键使焦点移到(focus)下一个输入框

当form表单提交过程中,有时我们想输入一个点击enter直接跳到下一个input框输入,下面是一个简单操作,但是对于复杂的操作及封装的一些表单,可以再深入加工处理一下。这里本博主只举这里一个简单的例子。直接上代码:

<el-form-item label="邮箱" prop="email">
   <el-input v-model="Form.email" @keyup.native.enter="focusNext('mobile')"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
    <el-input v-model.number="Form.mobile" ref="mobile"></el-input>
</el-form-item>
//下面的写在methods里
focusNext(nextRef) {
    this.$refs[nextRef].focus()
}

扩展:回车提交表单

1、el-button

<el-button type="primary" @click="submit('former')" native-type="submit">立即登录</el-button>

2、el-input

<el-input v-model="form.user" @keyup.enter.native="submit('form')"></el-input>

3、input

<input v-model="form.name" placeholder="昵称" @keyup.enter="submit">

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » vue+element通过回车键使焦点移到(focus)下一个输入框

点赞

发表评论

邮箱地址不会被公开。 必填项已用*标注