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

Question

我在一个网站上进行了一项调查,用户点击输入(我不知道为什么)并在不点击提交按钮的情况下意外提交调查(表格)似乎存在一些问题.有办法防止这种情况吗？

我在调查中使用HTML,PHP 5.2.9和jQuery.

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

Answer 2

禁止在任何地方输入密钥

如果您<textarea>的表单中没有,请将以下内容添加到您的<form>:

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

或者使用jQuery:

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

这将导致在keyCode上检查表单内的每个按键.如果它不是13(Enter键),那么它将返回true并且任何内容都将按预期运行.如果它是13(Enter键),那么它将返回false并且任何内容都会立即停止,因此不会提交表单.

该key事件是首选,Enter因为只有在实际插入字符时才会触发该事件.的true(和Enter时)被触发任何被按压的键,其中包括控制键.并且,falseof keydown表示插入的实际字符,而不是所使用的物理密钥.这样您就不需要明确检查Numpad Enter键(108)是否也被按下.该keyup是来不及阻止表单提交.

请注意,keyup正如在其他一些答案中所建议的那样,而不是在IE <= 8中keypress对KeyboardEvent.keyCode/ KeyboardEvent.key/ 不起作用Enter,所以如果您想要覆盖那些不良用户,那么这不是一个好的选择.

仅允许在textareas上输入密钥

如果你$(window)的表单中有一个(当然应该接受Enter键),那么将keypress处理程序添加到不是a的每个输入元素$(document).

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

允许在textareas上输入密钥并仅提交按钮

如果您也想在提交按钮上允许输入密钥keydown,那么您可以随时优化选择器,如下所示.

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

请注意,keyup正如其他一些答案中所建议的那样,不包括那些HTML5非文本输入,因此这不是一个好的选择器.

Answer 3

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

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

Answer 4

我必须捕获与按键相关的所有三个事件,以防止提交表单:

    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 5

如果您使用脚本进行实际提交,那么您可以将"return false"行添加到onsubmit处理程序,如下所示:

<form onsubmit="return false;">

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

Answer 6

使用:

$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.keyCode == 13) {
    e.preventDefault();
    return false;
  }
});

此解决方案适用于网站上的所有表单(也适用于使用Ajax插入的表单),仅防止Enter输入文本中的s.将它放在文档就绪功能中,并终生忘记这个问题.

Answer 7

Enter您可以将表单保留为原样并添加一些额外的客户端验证,而不是阻止用户按下,这可能会增加一些额外的客户端验证:当调查未完成时,结果不会发送到服务器,并且用户会收到一条很好的消息完成表格需要完成什么.如果您使用的是jQuery,请尝试使用Validation插件:

http://docs.jquery.com/Plugins/Validation

这需要比抓住Enter按钮更多的工作,但肯定会提供更丰富的用户体验.

Answer 8

一个简单的小jQuery解决方案:

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Answer 9

我还不能评论,所以我会发一个新的答案

接受的答案是ok-ish,但它并没有停止提交numpad enter.至少在当前版本的Chrome中.我不得不改变键码条件,然后才行.

if(event.keyCode == 13 || event.keyCode == 169) {...}

Answer 10

一种完全不同的方法:

1. <button type="submit">表单中的第一个将在按下时激活Enter.
2. 即使隐藏按钮也是如此 style="display:none;
3. 该按钮的脚本可以返回false,这将中止提交过程.
4. 您仍然可以让另一个<button type=submit>人提交表单.只需返回true级联提交.
5. Enter在真实提交按钮聚焦时按下将激活真实提交按钮.
6. 按Enter内部<textarea>或其他表单控件将正常运行.
7. 按Enter内部<input>窗体控件将触发第一个<button type=submit>返回false,因此没有任何反应.

从而:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

Answer 11

这是我达到目标的解决方案,它干净而有效.

$('form').submit(function () {
  if ($(document.activeElement).attr('type') == 'submit')
     return true;
  else return false;
});

Answer 12

给表单一个'javascript:void(0);'的动作 似乎可以做到这一点

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

Answer 13

不放置提交按钮可以。只需将脚本放到输入（类型=按钮）中，或添加eventListener（如果您希望它在表单中提交数据）。

宁可使用这个

<input type="button">

比使用这个

<input type="submit">

Answer 14

1. 不要对输入或按钮使用type ="submit".
2. 使用type ="button"并使用js [Jquery/angular/etc]将表单提交给服务器.

Answer 15

我需要阻止提交的特定输入,所以我使用了一个类选择器,让它成为一个"全局"功能,无论我需要它.

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

而这个jQuery代码:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

或者,如果keydown不足:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

一些说明:

在这里修改各种好的答案,Enter关键似乎适用keydown于所有浏览器.换句话说,我更新bind()了on()方法.

我是班级选择者的忠实粉丝,权衡所有利弊和绩效讨论.我的命名约定是'idSomething',表示jQuery使用它作为id,将它与CSS样式分开.

Answer 16

这里已经有很多很好的答案，我只是想从用户体验的角度做出一些贡献。表单中的键盘控制非常重要。

问题是如何禁用 keypress 上的提交Enter。不是如何Enter在整个应用程序中忽略。因此，请考虑将处理程序附加到表单元素，而不是窗口。

禁用Enter表单提交仍应允许以下操作：

1. Enter当提交按钮聚焦时通过表单提交。
2. 填充所有字段后提交表单。
3. 通过 与非提交按钮交互Enter。

这只是样板，但它遵循所有三个条件。

$('form').on('keypress', function(e) {
  // Register keypress on buttons.
  $attr = $(e.target).attr('type');
  $node = e.target.nodeName.toLowerCase();
  if ($attr === 'button' || $attr === 'submit' || $node === 'textarea') {
    return true;
  }

  // Ignore keypress if all fields are not populated.
  if (e.which === 13 && !fieldsArePopulated(this)) {
    return false;
  }
});

Answer 17

这是完美的方式，您不会从您的页面重定向

$('form input').keydown(function (e) {
if (e.keyCode == 13) {
    e.preventDefault();
    return false;
}
});

Answer 18

我使用此代码禁用输入类型 [文本] 和输入类型 [密码] 上的“ENTER”键，您也可以添加其他输入类型 [电子邮件]，或者也可以应用于您所需的输入类型。

$(document).on('keyup keypress', 'form input[type="text"] , input[type="password"]', function(e) {
        if (e.keyCode == 13) {
            e.preventDefault();
            return false;
        }
    });

Answer 19

您可以使用JavaScript方法检查是否已Enter按下键，如果已按下，则停止提交。

<script type="text/javascript">
  function noenter() {
  return !(window.event && window.event.keyCode == 13); }
</script>

只需在Submit方法上调用它即可。

Answer 20

仅阻止提交，但不阻止 Enter 键的其他重要功能，例如在以下内容中创建新段落<textarea>：

window.addEventListener('keydown', function(event) {
  //set default value for variable that will hold the status of keypress
  pressedEnter = false;

  //if user pressed enter, set the variable to true
  if (event.keyCode == 13)
    pressedEnter = true;

  //we want forms to disable submit for a tenth of a second only
  setTimeout(function() {
    pressedEnter = false;
  }, 100)

})

//find all forms
var forms = document.getElementsByTagName('form')

//loop through forms
for (i = 0; i < forms.length; i++) {
  //listen to submit event
  forms[i].addEventListener('submit', function(e) {
    //if user just pressed enter, stop the submit event
    if (pressedEnter == true) {
      updateLog('Form prevented from submit.')
      e.preventDefault();
      return false;
    }

    updateLog('Form submitted.')
  })
}

var log = document.getElementById('log')
updateLog = function(msg) {
  log.innerText = msg
}

input,
textarea {
  display: inline-block;
  margin-bottom: 1em;
  border: 1px solid #6f6f6f;
  padding: 5px;
  border-radius: 2px;
  width: 90%;
  font-size: 14px;
}

input[type=submit] {
  background: lightblue;
  color: #fff;
}

<form>
  <p>Sample textarea (try enter key):</p>
  <textarea rows="4">Hit enter, a new line will be added. But the form won't submit</textarea><br/>
  <p>Sample textfield (try enter key):</p>
  <input type="text" placeholder="" />
  <br/>
  <input type="submit" value="Save" />
  <h3 id="log"></h3>
</form>

Answer 21

您还可以使用javascript:void(0)来阻止表单提交。

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

<form action="javascript:void(0)" method="post">
    <label for="">Search</label>
    <input type="text">
    <button type="sybmit">Submit</button>
</form>

Answer 22

如果您使用的是 Alpine，则可以通过按以下操作来阻止表单提交Enter：

<div x-data>
  <form x-on:keydown.prevent.enter="">...</form>
</div>

或者，您可以使用修饰符在页面的.window根对象而不是元素上注册事件侦听器。window

<form>
  <div x-data>
    <input x-on:keydown.window.prevent.enter="" type="text">
  </div>
</form>