如何防止我的表单在 Vue.js 中使用 Enter 键提交？

Question

我总是在 Vue.js 中尝试$event ，但它从来没有为我工作过。

这是我的注册表单 html 脚本：

  <form @submit.prevent="RegisterUser($event)" name="register-form" novalidate>
    <div class="accordion" role="tablist">
      <AccountCredentials />
    </div>
  </form>

我的寄存器 function：

async RegisterUser(e) {
  console.log('event', e.keyCode); // got undefined
  if (e.keyCode !== 13) { // I wanna execute this code while it's not enter key
    
    if (this.v_isAllRegisterStepsValid() === true) {
      // REGISTER USER IF FORM IS VALID
      await store.dispatch('auth/UserRegister');
      if (this.is_user_registered === false) {
        this.mx_setModalOptions('Register Failed', this.register_msg, true); // show modal
      }
    }
    else { // SHOW ERROR MESSAGE IF FORM IS NOT VALID
      this.v_showStepsValidationError();
    } // end else
  }
},

当我点击 Enter 按钮时，我的表单提交。

e.keyCode undefined如何防止使用 Enter 按钮提交？

Answer 1

尝试了您的代码并查看$event实际包含的内容...（您也可以通过控制台在RegisterUser函数中记录e来做到这一点）。 它不包含键码或键，如果您按下回车键或按钮，则没有任何区别。 有一个名为submitter的属性，尽管如果您按下回车键并出现提交按钮，它总是会返回按钮元素......嗯。

所以我认为你可以做的是实际上将提交按钮设置为常规按钮type='button' ，调用与提交时相同的 function 。 顺便说一句，不需要添加$event作为参数，它会自动出现:)

似乎您有一个子组件作为您的表单，所以我假设您那里有提交按钮？ 如果是这样，您需要将提交按钮移动到父级（我会这样做）。 如果需要，您可以使用slot 。 如果您想将按钮保留在子项中，那么您需要将事件$emit给父项...无论如何，下面的解决方案在父项中有提交按钮：

<form @submit.prevent="RegisterUser">
  <AccountCredentials />
  <button type="button" @click="RegisterUser">Submit</button>
</form>

在 function 中，我们检查事件的类型是click （按钮）还是submit （回车按下）：

RegisterUser(e) {
  if (e.type === 'submit') {
    console.log('enter has been pressed!');
    // do stuff!
  }
  else if (e.type === 'click') {
    console.log('button clicked!');
    // do stuff!
  } else {
    console.log('Sorry, I dont know what happened!');
  }
},