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

【问题标题】：How to prevent my Form from submitting with Enter Key in Vue.js?如何防止我的表单在 Vue.js 中使用 Enter 键提交？
【发布时间】：2021-07-27 19:02:58
【问题描述】：

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

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

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

我的注册功能：

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 got undefined 如何防止使用 Enter 按钮提交？

【问题讨论】：

只需使用e.preventDefault() 来防止默认行为
@SAM 这就是.prevent= 修饰符的作用
e.preventDefault() 不妨碍函数的工作
e.keyCode 已弃用，请尝试e.key
this.v_isAllRegisterStepsValid()) --> 语法错误？

标签： javascript html vue.js

【解决方案1】：

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

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

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

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

在函数中我们检查事件的类型是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!');
  }
},

【讨论】：