jquery禁用表单提交时输入

jquery disable form submit on enter

本文关键字:输入 表单提交 jquery      更新时间:2023-09-26

我的页面中有以下javascript,它似乎不起作用。

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

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

如果未捕获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一样,表单提交不会被阻止,因此将按键事件添加到表单中也更安全。此外,它不再起作用(不再?),只需将事件绑定到表单"name",而仅绑定到表单 id。因此,我通过适当地更改代码示例使这一点更加明显。

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

通常,

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

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

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

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

甚至更短:

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

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

which文档。

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

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

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

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

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

<form onsubmit="return false;">

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

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

必须捕获和测试 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 个输入字段,并且该字段是"文本"输入,则此行为不适用;在这种情况下,即使 HTML 标记中不存在提交按钮(例如搜索字段),表单也将通过 ENTER 键提交。自 90 年代以来,这一直是标准的浏览器行为。

你可以在纯Javascript中完美地做到这一点,简单且不需要库。这是我对类似主题的详细回答:禁用表单的回车键

简而言之,这是代码:

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

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

我不知道

您是否已经解决了这个问题,或者现在是否有人试图解决这个问题,但是,这是我的解决方案!

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

在 Firefox 中,当您输入并按回车键时,它将提交其上层形式。解决方案在将提交表格中添加以下内容:

<input type="submit" onclick="return false;" style="display:none" />
$('#FormID').on('keyup keypress', function (e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) {
            e.preventDefault();
            return false;
        }
    });

以下代码将否定用于提交表单的输入键,但仍允许您在文本区域中使用 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> 

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

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

假设表单有一个提交按钮,无论是<button id="save-form">还是<input id="save-form" type="submit">,都执行:

$("#save-form").on("click", function () {
    $.ajax({
        ...
    });
    return false;
});

下面是一个简单的 JavaScript 解决方案,不使用处理键下或按键事件的不同变体:

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

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

我听说不推荐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

使用 EnterByTab() 作为消除的 Enter->Submit 表单

function EnterByTab(){  //only in form
  $('body').on('keydown', 'input, select, radio', function(e) {
    if (e.key === "Enter") {
      var self = $(this), form = self.parents('form:eq(0)'), focusable, next;
      focusable=form.find(':input,a,select,button,textarea').filter(':visible');
      next = focusable.eq(focusable.index(this)+1);
      var i=1;
      while (next.attr('readonly') || next.prop("type")=="radio") {
        i++;
        next = focusable.eq(focusable.index(this)+i);
      }
      if (next.length) {
        next.focus();
      } else {
        form.submit(); //original behavior
      }
      return false;
    }
  });
}

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

<script>
            $(document).ready(function () {
                $(window).keydown(function(event){
                    if(event.keyCode == 13) {
                        e.preventDefault(); // Disable the " Entry " key
                        return false;               
                    }
                });
            });
        </script>

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

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

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

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

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

这个怎么样:

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

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