防止在进入 VueJS/语义 UI 时提交表单答案

【问题标题】：Prevent form submit on enter VueJS/Semantic UI防止在进入 VueJS/语义 UI 时提交表单
【发布时间】：2018-04-07 03:38:25
【问题描述】：

2 天来一直在寻找解决此问题的方法，但到目前为止，建议的解决方案都没有奏效。

我的表单html是用

定义的

<form id="quote_form" action="" method="get" class="ui large form">

并在表单中输入文本字段

<input v-model="city" type="text" name="quote[city]" id="city">

我一直在尝试找出问题的原因，但未能做到。我尝试关闭语义 ui 表单的键盘快捷键设置：

$('.ui.form').form({
  keyboardShortcuts: false
});

我也尝试过覆盖回车键并阻止它以这些方式触发提交功能：

$('#quote_form').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) {
    e.stopPropagation();
    e.preventDefault();
    return false;
  }
});

$(document).on("keypress", "form", function(event) {
  return event.keyCode != 13;
});

$('#quote_form').bind('keypress keydown keyup', function(e){
  if(e.keyCode == 13) { e.preventDefault(); }
});

表格有多个填写步骤。每个步骤都使用一个按钮来允许进入下一步。当按下回车键时，它会导致表单重定向到表单的第一步/选项卡。唯一不重定向的情况是当前步骤的规则不满足。表单提交由提交按钮处理，按钮本身调用方法来验证和提交表单。我找不到输入提交行为和提交按钮之间的任何联系。

如果我遗漏了任何有用的信息来帮助查明原因，请告诉我。我刚开始在这里提问，并希望尽可能避免我的问题被认为是不好的:)

【问题讨论】：

您需要防止按键输入，而不是表单。

标签： javascript jquery forms vue.js semantic-ui

【解决方案1】：

只需在输入标记的末尾使用@keyup.enter.prevent。见VueJS Doc

顺便说一句，你应该尝试使用原生 VueJS 事件，而不是全部用 JQuery 重做

【讨论】：

【解决方案2】：

以下是适合您的解决方案： @submit.prevent https://jsfiddle.net/4qpffycs/2/

【讨论】：

【解决方案3】：

我找到的解决方案只涉及没有 VueJS 的语义 UI，但应该适用于这里，并且对这个问题有一些了解。

问题源于$("#formId").form({ ... }) 为按下按钮注册了一个事件处理程序，如果选择了其中一个输入框，则在按下 Enter 时提交表单。这可以在选择元素并选择事件监听器类别时在 Chrome DevTools 中看到：

我发现消除此行为的最简单方法是调用

$("#formId").unbind('keydown')

从元素中完全移除 keydown 绑定。

【讨论】：