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

Posted 2023-02-22

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

【英文标题】：How to prevent my Form from submitting with Enter Key in Vue.js?

【发布时间】：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()) --> 语法错误？

【参考方案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!');
  
,