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

Question

我的页面中有以下javascript似乎无效。

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

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

Answer 1

如果未找到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事件添加到表单也更安全。通过将事件绑定到表单＆＃34; name＆＃34;它还不起作用（不再？）但仅限于表格ID。因此，我通过适当地更改代码示例使这一点变得更加明显。

编辑3：将bind()更改为on()

Answer 2

当您专注于输入元素时，通常会在 Enter 上提交表单。

我们可以在表单中的输入元素上禁用 Enter 键（代码13）：

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

DEMO： http://jsfiddle.net/bnx96/325/

Answer 3

更短：

$('myform').submit(function() {
  return false;
});

Answer 4

$('form').keyup(function(e) {
  return e.which !== 13  
});

event.which 属性规范化event.keyCode和event.charCode。建议观看event.which键盘输入键。

which docs.

Answer 5

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

此解决方案适用于网站上的所有表单（也适用于使用ajax插入的表单），仅防止输入文本中的输入。将它放在文档就绪功能中，并终生忘记这个问题。

Answer 6

必须捕获并测试ENTER键的每次击键的过度杀戮真的让我感到困惑，所以我的解决方案依赖于以下浏览器行为：

按ENTER将在提交按钮上触发点击事件（在IE11，Chrome 38，FF 31中测试） ** （参考：http://mattsnider.com/how-forms-submit-when-pressing-enter/）

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

<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个输入字段且该字段是＆＃39; text＆＃39;则此行为不适用输入;在这种情况下，即使HTML标记中没有提交按钮（例如搜索字段），也将在ENTER键上提交表单。这是自90年代以来的标准浏览器行为。

Answer 7

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

var keyCode = e.keyCode || e.which;
if (keyCode === 13 && !$(document.activeElement).is('textarea')) {
  e.preventDefault();
  return false;
}

Answer 8

您可以在纯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>

此代码用于防止＆＃34;输入＆＃34;输入类型的键=＆＃39; text＆＃39;只要。（因为访问者可能需要在整个页面上按Enter键）如果要禁用＆＃34;输入＆＃34;对于其他操作，您可以添加console.log（e）;为了您的测试目的，并在Chrome中点击F12，转到＆＃34; console＆＃34; tab＆hit＆＃34; backspace＆＃34;在页面上查看内部以查看返回的值，然后您可以定位所有这些参数以进一步增强上面的代码，以满足您对 ＆＃34; e.target.nodeName＆＃34的需求; ， ＆＃34; e.target.type＆＃34; 以及更多......

Answer 9

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

<form onsubmit="return false;">

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

Answer 10

我不知道你是否已经解决了这个问题，或者现在有人试图解决这个问题，但是，这是我的解决方案！

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

Answer 11

简单的方法是将按钮的类型更改为按钮-在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();
});

Answer 12

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

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

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

Answer 13

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

Answer 14

在firefox中，当你输入并按回车键时，它将提交它的上层表格。解决方案是在提交表单中添加：

<input type="submit" onclick="return false;" style="display:none" />

Answer 15

以下代码将取消用于提交表单的回车键，但仍允许您在textarea中使用回车键。您可以根据需要进一步编辑。

<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>

Answer 16

我听说不推荐使用keys，因此将Best rated answer更改为此。

const oops = deepIndex(obj, "a", "b", "c", "d"); // error!
// --------------------------------------> ~~~
// "d" is not assignable to keyof number

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

Answer 17

当文件结束（加载完成）时，脚本会检测每个事件的“Entry”键，并禁用后面的事件。

getItemCount()

Answer 18

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

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

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

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

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

Answer 19

这个怎么样：

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

这应该会在您的应用中使用提交按钮停用所有表单。

输入时jquery禁用表单提交

19 个答案:

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