225

我的页面中有以下 javascript,但似乎无法正常工作。

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

我想禁用在输入时提交表单,或者更好的是,调用我的 ajax 表单提交。任何一种解决方案都是可以接受的,但我上面包含的代码不会阻止表单提交。

4

20 回答 20

462

如果keyCode没有被抓住,抓住which

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

编辑:错过了,最好使用keyup而不是keypress

编辑 2:在一些较新版本的 Firefox 中,不会阻止表单提交,将 keypress 事件添加到表单也更安全。此外,仅将事件绑定到表单“名称”但仅绑定到表单 ID,它也不起作用(不再?)。因此,我通过适当地更改代码示例使这一点更加明显。

编辑 3:更改bind()on()

于 2012-06-27T22:28:51.133 回答
65

Enter通常在您关注输入元素时提交表单。

我们可以在表单中的输入元素上禁用Enter键(代码):13

$('form input').on('keypress', function(e) {
    return e.which !== 13;
});

演示:http: //jsfiddle.net/bnx96/325/

于 2012-06-27T22:28:59.683 回答
43

更短:

$('myform').submit(function() {
  return false;
});
于 2012-12-07T20:41:16.833 回答
24
$('form').keyup(function(e) {
  return e.which !== 13  
});

event.which属性规范了 event.keyCode 和event.charCode 。建议观看 event.which 进行键盘按键输入。

which文档。

于 2012-06-27T22:27:49.007 回答
16
$(document).on('keyup keypress', 'form input[type="text"]', function(e) {
  if(e.which == 13) {
    e.preventDefault();
    return false;
  }
});

此解决方案适用于网站上的所有表单(也适用于使用 ajax 插入的表单),仅防止在输入文本中输入。把它放在一个文件准备功能中,一辈子忘记这个问题。

于 2014-05-30T12:32:33.233 回答
11

上面的大多数答案都会阻止用户在 textarea 字段中添加新行。如果这是您想要避免的事情,您可以通过检查当前具有焦点的元素来排除这种特殊情况:

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}
于 2016-07-26T15:08:50.333 回答
9

必须捕获和测试 ENTER 键的每个击键的过度杀伤力真的让我很烦恼,所以我的解决方案依赖于以下浏览器行为:

按 ENTER 将触发提交按钮上的单击事件(在 IE11、Chrome 38、FF 31 中测试) **(参考: http: //mattsnider.com/how-forms-submit-when-pressing-enter/

所以我的解决方案是删除标准提交按钮(即<input type="submit">),以便上述行为失败,因为当按下 ENTER 时没有提交按钮可以神奇地单击。.submit()相反,我在常规按钮上使用 jQuery 单击处理程序通过 jQuery 的方法提交表单。

<form id="myform" method="post">
  <input name="fav_color" type="text">
  <input name="fav_color_2" type="text">
<button type="button" id="form-button-submit">DO IT!</button>
</form>

<script>
 $('#form-button-submit').click(function(){
    $('#myform').submit();
  });
</script>

演示:http ://codepen.io/anon/pen/fxeyv?editors=101

** 如果表单只有 1 个输入字段并且该字段是“文本”输入,则此行为不适用;在这种情况下,即使 HTML 标记中没有提交按钮(例如搜索字段),表单也将按 ENTER 键提交。这是自 90 年代以来的标准浏览器行为。

于 2014-10-31T21:36:05.997 回答
9

简单的方法是将按钮的类型更改为按钮 - 在 html 中,然后在 js 中添加事件......

从此改变:

<form id="myForm">
   <button type="submit">Submit</button>
</form>

<form id="myForm">
   <button type="button" id="btnSubmit">Submit</button>
</form>

并在 js 或 jquery 中添加:

$("#btnSubmit").click(function () {
    $('#myForm').submit();
});
于 2019-08-27T09:54:09.170 回答
7

如果您只想在输入和提交按钮上禁用提交,请使用表单的 onsubmit 事件

<form onsubmit="return false;">

您可以将“return false”替换为对 JS 函数的调用,该函数将执行所需的任何操作,并将表单作为最后一步提交。

于 2014-03-09T15:22:19.210 回答
5

您可以在纯 Javascript 中完美地做到这一点,简单且不需要库。这是我对类似主题的详细回答: Disabling enter key for form

简而言之,这里是代码:

<script type="text/javascript">
window.addEventListener('keydown',function(e){if(e.keyIdentifier=='U+000A'||e.keyIdentifier=='Enter'||e.keyCode==13){if(e.target.nodeName=='INPUT'&&e.target.type=='text'){e.preventDefault();return false;}}},true);
</script>

此代码仅用于防止输入 type='text' 的“Enter”键。(因为访问者可能需要在页面上按回车键)如果您还想禁用其他操作的“回车”,您可以添加 console.log(e); 出于您的测试目的,并在 chrome 中按 F12,转到“控制台”选项卡并在页面上按“退格键”并查看其内部以查看返回的值,然后您可以定位所有这些参数以进一步增强代码以上以满足您对"e.target.nodeName""e.target.type"等等的需求......

于 2016-05-15T19:11:54.643 回答
3

我不知道您是否已经解决了这个问题,或者是否有人正在尝试解决这个问题,但是,这是我的解决方案!

$j(':input:not(textarea)').keydown(function(event){
    var kc = event.witch || event.keyCode;
    if(kc == 13){
    event.preventDefault();
        $j(this).closest('form').attr('data-oldaction', function(){
            return $(this).attr('action');
        }).attr('action', 'javascript:;');

        alert('some_text_if_you_want');

        $j(this).closest('form').attr('action', function(){
            return $(this).attr('data-oldaction');
        });
        return false;
    }
});
于 2014-07-17T17:51:56.147 回答
2

在Firefox中,当您输入并按Enter键时,它将提交其上层形式。解决方案是在将提交表单中添加:

<input type="submit" onclick="return false;" style="display:none" />
于 2014-08-25T05:53:44.697 回答
1

下面的代码将禁止使用 enter 键提交表单,但仍允许您在 textarea 中使用 enter 键。您可以根据需要进一步编辑它。

<script type="text/javascript">
        function stopRKey(evt) {
          var evt = (evt) ? evt : ((event) ? event : null);
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
          if ((evt.keyCode == 13) && ((node.type=="text") || (node.type=="radio") || (node.type=="checkbox")) )  {return false;}
        }

        document.onkeypress = stopRKey;
</script> 
于 2013-10-11T17:48:53.757 回答
1

3年后,没有一个人完全回答了这个问题。

提问者想取消默认的表单提交并调用自己的 Ajax。这是一个带有简单解决方案的简单请求。无需截取输入到每个输入中的每个字符。

假设表单有一个提交按钮,无论是 a<button id="save-form">还是 an <input id="save-form" type="submit">,请执行以下操作:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});
于 2015-08-26T14:21:01.740 回答
1
$('#FormID').on('keyup keypress', function (e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) {
            e.preventDefault();
            return false;
        }
    });
于 2021-07-16T07:37:09.907 回答
1

这是一个简单的 JavaScript 解决方案,不使用处理 keydown 或 keypress 事件的不同变体:

document.forms[0].addEventListener('submit', function(e) {
    if(document.activeElement.getAttribute('type') !== 'submit') {
        e.preventDefault();
    }
});

仅当页面上的活动元素是提交按钮时才会提交表单。因此,您可以通过单击提交按钮或在提交按钮获得焦点时按 ENTER 键来提交表单。

于 2021-07-16T15:42:32.623 回答
0

我听说which不推荐,所以将最佳评分答案更改为此。

$('#formid').on('keyup keypress', function(e) {
  if (e.key === 'Enter') { 
    e.preventDefault();
    return false;
  }
});

参考。https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which

于 2020-05-07T02:12:32.563 回答
-2

当文件完成(加载完成)时,脚本会检测“Entry”键的每个事件,并禁用后面的事件。

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>
于 2016-09-22T06:36:52.687 回答
-4

适用于所有浏览器的 JavaScript 完整解决方案

上面的代码和大多数解决方案都是完美的。但是,我认为最喜欢的一个“简短答案”是不完整的。

所以这是完整的答案。在原生支持 IE 7 的 JavaScript 中。

var form = document.getElementById("testForm");
form.addEventListener("submit",function(e){e.preventDefault(); return false;});

此解决方案现在将阻止用户使用 enter 键提交,并且不会重新加载页面,或者如果您的表单位于下方,则不会将您带到页面顶部。

于 2015-11-02T04:07:43.523 回答
-10

这个怎么样:

$(":submit").closest("form").submit(function(){
    $(':submit').attr('disabled', 'disabled');
});

这应该会禁用应用程序中所有带有提交按钮的表单。

于 2013-02-14T15:51:49.653 回答