jQuery的禁用表单提交输入


207

我的页面中似乎包含以下javascript,但似乎无法正常运行。

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

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


3
这是一个简单的仅HTML解决方案:stackoverflow.com/a/51507806/337934
SamB

Answers:


420

如果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()


15
jQuery将其归一化为e.which,因此您无需测试e.keyCode,但最有可能导致此问题的原因为+1。
Bojangles 2012年

4
你需要return false;这个吗?e.preventDefault();似乎
很深

10
重要!此解决方案块在textarea中中断。
德国霍克洛夫,2016年

4
问题是,如果我具有相同形式的文本框,现在无法在文本框中添加回车键(以换行)。
Tikky

3
keyCode === 13 && !$(e.target).is('textarea')
teran

62

通常,Enter当您专注于输入元素时,将提交表单。

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

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

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


iOS Go按钮是我在自定义自动填充输入字段上遇到的问题。这解决了。
Dylan Valade 2013年

11
这样可以防止以相同的形式使用Entertextareas。使用$("form input")代替$("form :input")似乎可以解决它。演示:jsfiddle.net/bnx96/279
shaneparsons 2015年

43

甚至更短:

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

35
但这也会阻止用户点击吗?
haibuihoang 2014年

5
@haibuihoang是的,这将禁用表单提交。
2014年

7
您应该使用function(e) {e.preventDefault();}不赞成使用的事件处理程序中的返回值:stackoverflow.com/a/20045473/601386
2015年

6
@ user1111929这确实很好用,但它不是最好的答案,因为该问题仅询问有关Enter而不是禁用Submit按钮提交表单的问题。
daveslab 2015年

一个常见的情况是您可能想要保留表单提交,但是在按下“ enter”键时禁用提交,这是如果您决定使用jQuery onClick事件来验证表单,而仍然使用jQuery提交。换句话说,在某些情况下,您只想通过javascript / jQuery提交。尽管您仍然可以在此解决方案中使用AJAX,但它会禁用该submit方法的基本功能。
杰拉德·巴德


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

该解决方案适用于网站上的所有表单(也适用于使用ajax插入的表单),仅防止在输入文本中输入Enter。将其放在文档准备就绪功能中,并终身忘记此问题。


9

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

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

8

不得不捕获并测试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

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


我添加了一个不可见的输入框来应对“表单只有1个输入字段,而该字段是'文本'输入”引起的“表单将按ENTER键提交”。
罗炯辉

6

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

<form onsubmit="return false;">

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


1
这将禁用所有表单提交,包括单击提交按钮。
尼克

不是100%...工作常规提交密钥...最好使用jquery来防止
KingRider

好的替代答案(上面有警告),因为……好吧,有时候这就是您所需要的。
艾米丽斯(Emilys)

这正是我所需要的,谢谢
shababhsiddique

4

您可以用纯Javascript完美地做到这一点,简单而无需库。这是我针对类似主题的详细答案: 禁用表单的Enter键

简而言之,下面是代码:

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

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


2
其实应该是e.target.nodeName === 'INPUT' && e.target.type !== 'textarea'。使用指定的代码,如果单选或复选框处于焦点状态,它将允许提交表单。
2016年

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

2

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

1

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

1

在firefox中,当您输入内容并按回车键时,它将提交其大写形式。解决方案是在将提交表单中添加以下内容:

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

1

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

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

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

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


-2

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

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

添加一些解释
HaveNoDisplayName

@HaveNoDisplayName:已更新。
McNavy

-4

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

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

所以这就是整个答案。在JavaScript中也具有对IE 7的本机支持。

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

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


8
如果您单击“提交”按钮,这也将阻止提交表单。
马里奥·沃纳

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.