通过按 Enter 阻止用户提交表单

我在网站上进行了一项调查，用户单击 Enter 键（我不知道为什么），然后不按提交按钮就意外提交了调查（表单），似乎存在一些问题。有办法防止这种情况吗？

我在调查中使用 HTML，PHP 5.2.9 和 jQuery。

答案

您可以使用诸如

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

在阅读原始帖子上的评论时，要使其更加有用，并允许人们在完成所有字段后按Enter 键 ：

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

禁止在任何地方输入密钥

如果您的表单中没有<textarea> ，则只需将以下内容添加到您的<form> ：

<form ... onkeydown="return event.key != 'Enter';">

或使用 jQuery：

$(document).on("keydown", "form", function(event) { 
    return event.key != "Enter";
});

这将导致表单内的每个按键将在被检查key 。如果不是Enter ，那么它将返回true并且一切照常进行。如果它是Enter ，那么它将返回false并且任何内容都会立即停止，因此不会提交该表单。

keydown事件优于keyup事件，因为keyup事件为时已晚，无法阻止表单提交。从历史上讲，也有keypress ，但是不赞成这样做， KeyboardEvent.keyCode 。您应该改用KeyboardEvent.key ，它返回被按下的键的名称。选中Enter ，它将同时检查 13（普通输入）和 108（数字键盘输入）。

请注意，在某些其他答案中建议使用$(window)代替$(document)不适用于 IE <= 8 中的keydown / keyup ，因此如果您也想覆盖那些可怜的用户，那么这不是一个好选择。

仅在文本区域上允许输入键

如果您的表单中有一个<textarea> （当然应该接受 Enter 键），则将 keydown 处理程序添加到不是<textarea>每个单独的输入元素中。

<input ... onkeydown="return event.key != 'Enter';">
<select ... onkeydown="return event.key != 'Enter';">
...

为了减少样板，最好使用 jQuery：

$(document).on("keydown", ":input:not(textarea)", function(event) {
    return event.key != "Enter";
});

如果您在这些输入元素上附加了其他事件处理函数，并且由于某些原因也希望在 enter 键上调用这些事件处理函数，则仅阻止事件的默认行为，而不是返回 false，以便可以正确传播到其他处理函数。

$(document).on("keydown", ":input:not(textarea)", function(event) {
    if (event.key == "Enter") {
        event.preventDefault();
    }
});

允许在文本区域上输入回车键，仅提交按钮

如果您也想允许在提交按钮<input|button type="submit">上输入 Enter 键，那么您始终可以按如下所示优化选择器。

$(document).on("keydown", ":input:not(textarea):not(:submit)", function(event) {
    // ...
});

请注意，其他一些答案中建议的input[type=text]不会涵盖那些 HTML5 非文本输入，因此这不是一个好的选择器。

W3C HTML5 规范的第 4.10.22.2 节隐式提交说：

form元素的默认按钮是树形顺序中的第一个提交按钮，其表单所有者是该form元素。
如果用户代理支持让用户隐式提交表单（例如，在某些平台上，当文本字段被隐式聚焦时，按下 “enter” 键，则提交表单），则对默认按钮已定义激活的表单执行此操作行为必须导致用户代理在该默认按钮上运行综合点击激活步骤。
注意：因此，如果禁用了默认按钮，则使用这种隐式提交机制时不会提交表单。（禁用时，按钮没有激活行为。）

因此，禁用任何隐式提交表单的符合标准的方法是将禁用的提交按钮放置为表单中的第一个提交按钮：

<form action="...">
  <!-- Prevent implicit submission of the form -->
  <button type="submit" disabled style="display: none" aria-hidden="true"></button>

  <!-- ... -->

  <button type="submit">Submit</button>
</form>

这种方法的一个不错的功能是，它无需 JavaScript就可以工作；无论是否启用 JavaScript，都需要使用符合标准的 Web 浏览器以防止隐式表单提交。