防止用户通过按Enter键提交表单

Question

我有一个网站上的调查，似乎有一些问题，用户点击回车(我不知道为什么)和意外提交调查(表格)没有点击提交按钮。有没有办法防止这种情况发生？

我在调查中使用了HTMLPHP5.2.9和jQuery。

Answer 1

禁止在任何位置按enter键

如果表单中没有<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，所以如果您想要覆盖那些贫穷的用户，这不是一个好的选择。

仅允许在文本区域中使用enter键

如果表单中有一个<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();
    }
});

仅允许在文本区域和提交按钮上使用enter键

如果你想在提交按钮上也允许Enter键<input|button type="submit">，那么你可以像下面这样改进选择器。

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

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

Answer 2

W3C HTML5规范的Section 4.10.22.2 Implicit submission说：

form元素的缺省按钮是tree order中第一个form owner为该form元素的submit button。

如果用户代理支持让用户隐式提交表单(例如，在某些平台上，当文本字段被聚焦时按"enter“键隐式提交表单)，那么对其default button具有定义的activation behavior的表单执行此操作必须导致用户代理在该default button上执行run synthetic click activation steps操作。

注意：因此，如果禁用了default button，则在使用这种隐式提交机制时不会提交表单。(按钮在禁用时没有activation behavior。)

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

<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浏览器来防止隐式表单提交。

Answer 3

为了防止表单被提交，我必须捕获与按键相关的所有三个事件：

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            console.log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

您可以将以上所有内容组合成一个很好的紧凑版本：

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