首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >vue+element通过回车键使焦点移到(focus)下一个输入框

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

作者头像
用户2323866
修改2021-06-23 18:05:29
修改2021-06-23 18:05:29
6.4K0
举报
文章被收录于专栏:技术派技术派

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

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 扩展:回车提交表单
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档