阻止用户按 Enter 键提交表单

Question

我在一个网站上进行了一项调查，用户按下回车键（我不知道为什么）并且在没有点击提交按钮的情况下意外提交了调查（表格）似乎存在一些问题。有没有办法防止这种情况？

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

原文由 DForck42 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用诸如

$(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;
    }
  });
});

原文由 user83632 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

禁止在任何地方输入密钥

如果您的表单中没有 <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（NUMPAD ENTER）。

Note that $(window) as suggested in some other answers instead of $(document) doesn’t work for keydown / keyup in IE<=8,所以如果你也想覆盖那些可怜的用户，那不是一个好的选择。

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

如果您的表单中有 <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";
});

如果您在这些输入元素上附加了其他事件处理函数，出于某种原因您还想在回车键上调用这些函数，那么只阻止事件的默认行为而不是返回 false，这样它就可以正确地传播到其他处理程序。

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

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

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

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

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

原文由 BalusC 发布，翻译遵循 CC BY-SA 4.0 许可协议