通过点击Enter阻止用户提交表单

Question

通过点击Enter阻止用户提交表单我有一个网站上的调查，似乎有一些问题，用户点击Enter(我不知道为什么)和意外提交调查(表单)，而没有点击提交按钮。有办法防止这种情况发生吗？我在调查中使用了HTML、PHP5.2.9和jQuery。

Answer 1

您可以使用如下方法

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

在阅读原文评论时，使其更实用，并允许人们按下进入如果它们已完成所有字段：

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

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(数字输入)。

请注意$(window)就像其他一些答案中所建议的，而不是$(document)不起作用keydown/keyup在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";});

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

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

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

如果要允许提交按钮上的Enter键<input|button type="submit">同样，您也可以按照下面的方式对选择器进行细化。

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

请注意input[type=text]正如其他一些答案所建议的，不包括HTML 5的非文本输入，所以这不是一个好的选择器。

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

Answer 4

如果使用脚本执行实际提交，则可以在onSubmit处理程序中添加“返回false”行，如下所示：

<form onsubmit="return false;">

从JavaScript调用表单上的Submit()不会触发事件。