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

Question

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

jqueryhtmlformsform-submit

982

我有一个调查网站，在用户填写问卷时，似乎存在按下回车键（原因未知）并且在没有点击提交按钮的情况下，意外提交了问卷表单的问题。是否有方法可以防止这种情况发生？

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

- DForck42

3

不要使用表单标签，自定义ajax请求。但是当然，你可以继续使用按键监听和预防措施，那就是我会做的事情。 - jancha

我不使用表单标签，因为我更喜欢通过非传统的方式（例如：在字段失去焦点时提交某些字段等）通过ajax请求处理表单。您还可以创建一个特殊的监听器来捕获Enter键并仅在需要时处理它。 - Juan

36个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Developer · Answer 1

这是我的解决方案，能够达成目标，而且干净有效。

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

- Nisharg Shah · Answer 2

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

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

- Jimwel Anobong · Answer 3

不需要放置提交按钮也可以。只需将脚本放到输入框(type=button)中，或者添加一个eventListener，如果想将数据提交到表单中。

最好使用这个方法：

<input type="button" onclick="event.preventDefault();this.closest('form').submit();">

比起使用这个更好。

<input type="submit">

注意：在这里需要使用onclick以便在单击时实际提交表单。默认情况下，type="button" 不足以提交表单。

- Khn Rzk · Answer 4

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

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

- sidarcy · Answer 5

给表单设置动作为 '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>

- Irfan Ashraf · Answer 6

不要在输入框或按钮中使用type="submit"。
使用type="button"，并使用js [Jquery/angular等]将表单提交到服务器。

- goodeye · Answer 7

我需要防止特定的输入提交，因此我使用了类选择器，让它成为一个“全局”功能，无论在哪里使用都可以。

<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正在使用它作为标识符，以将其与CSS样式分开。

- M Ali Imtiaz · Answer 8

我已经使用此代码来禁用输入类型为[text]和[input type=“password”] 的“ENTER”键按下，您也可以添加其他例如[input type=“email”]的输入类型或应用于所需的输入类型。

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

- Brandon · Answer 9

您可以编写一个 JavaScript 方法来检查是否按下了 Enter 键，如果是，则停止提交。

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

只需在提交方法中调用它即可。

- png · Answer 10

已经有很多好的答案了，我只想从用户体验的角度做出贡献。在表单中使用键盘控制非常重要。问题是如何在按下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;
  }
});