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

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

代码语言：javascript复制

<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>

代码语言：javascript复制

//下面的写在methods里
focusNext(nextRef) {
    this.$refs[nextRef].focus()
}

扩展：回车提交表单

1、el-button

代码语言：javascript复制

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

2、el-input

代码语言：javascript复制

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

3、input

代码语言：javascript复制

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

button el form input 表单

0 人点赞