vue回车触发下一个input框获取焦点

最新推荐文章于 2024-04-29 08:52:32 发布

Redundantº

最新推荐文章于 2024-04-29 08:52:32 发布

阅读量2.4k

点赞数 1

文章标签： vue.js 前端 vscode elementui

本文链接：https://blog.csdn.net/qq_45256497/article/details/124102292

版权

回车获取下一个input框焦点，回车登录

话不多说，上代码：

<div class="mt20">
  <el-input
    id="username"
    ref="username"
    v-model="username"
    class="mt15"
    maxlength="11"
    placeholder="用户名"
    @keyup.enter.native="changeFocus('username')"
  ></el-input>
  <el-input
    id="password"
    ref="password"
    v-model="password"
    type="password"
    class="mt15"
    placeholder="密码"
    @keyup.enter.native="changeFocus('submit')"
  ></el-input>
  <el-button
    type="primary"
    class="mt15 js-login"
    :disabled="loginBtnDisabled"
    @click="login()"
    >{{ loginBtn }}</el-button
  >
</div>

javascript部分代码：

changeFocus(obj) {
  if (obj === 'username') {
    this.$nextTick(() => {
      this.$refs.password.focus()
    })
  }
  if (obj === 'submit') this.login()
}