vue 回車觸發聚焦 @keyup.enter.native，元素事件加native

vue 回車觸發聚焦 @keyup.enter.native


1.vue登錄界面輸入用戶名回車自動聚焦密碼框


用戶框里放：@keyup.enter.native="keyupClick";
密碼框里放:：ref="mima"
在methods里：

keyupClick() {
      this.$refs.mima.focus()
},

直接上代碼

  <van-field
    v-model="username"
    clearable
    type="tel"
    label="用戶名"
    right-icon="question-o"
    placeholder="請輸入手機號"
    left-icon="contact"
    @click-right-icon="$toast('用戶名必須是手機號')"
    @keyup.enter.native="keyupClick"
  />
  <van-field
    v-model="password"
    clearable
    type="password"
    label="密碼"
    right-icon="question-o"
    placeholder="請輸入6-12位數密碼"
    left-icon="closed-eye"
    ref="mima"
    @click-right-icon="$toast('密碼必須是數字、字母')"
    @keyup.enter.native="onClickButtonSubmit"
  />

注意：v-model數據層一定要在@keyup.enter.native 事件之前。
在methods里

keyupClick() {
  this.$refs.mima.focus()
},

[e-mail]跟@keyup.enter區別

在 Vue 2.0 中，為自定義組件綁定原生事件必須使用 .native 修飾符，只有Button 組件可以監聽 click 事件。

補：
3.點擊按鈕聚焦
在$refs前加nextTick，

否則直接this.$refs.reps.focus()使用不了

      this.$nextTick(() => {
        this.$refs.reps.focus();
      });
————————————————
版權聲明：本文為CSDN博主「努力，加油，奮斗」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_43681948/article/details/101109268