首页 文章

输入时jquery禁用表单提交

提问于
浏览
175

我的页面中有以下javascript似乎不起作用 .

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

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

16 回答

  • 7

    这个怎么样:

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

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

  • 3

    如果未捕获 keyCode ,请 grab 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事件添加到表单也更安全 . 它也不起作用(不再?)只是将事件绑定到表单“name”但仅限于表单id . 因此,我通过适当地更改代码示例使这一点变得更加明显 .

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

  • 40

    当您关注输入元素时,通常会在Enter上提交表单 .

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

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

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

  • 53

    更短:

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

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

    which docs.

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

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

  • 3

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

    Pressing ENTER will trigger a click event on the submit button (tested in IE11, Chrome 38, FF 31) **(参考:http://mattsnider.com/how-forms-submit-when-pressing-enter/

    所以我的解决方案是删除标准的提交按钮(即 <input type="submit"> ),以便上述行为失败,因为有's no submit button to magically click when ENTER is pressed. Instead, I use a jQuery click handler on a regular button to submit the form via jQuery' s .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年代以来的标准浏览器行为 .

  • -2

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

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

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

    <form onsubmit="return false;">
    

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

  • 1

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

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

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

    此代码仅用于阻止输入类型='text'的“Enter”键 . (因为访问者可能需要在整个页面中按Enter键)如果要为其他操作禁用“Enter”,则可以添加console.log(e);为了您的测试目的,并在Chrome中点击F12,转到“控制台”选项卡并点击页面上的“退格”并查看其中的内容以查看返回的值,然后您可以定位所有这些参数以进一步增强代码以上是为了满足你对“e.target.nodeName”,“e.target.type”以及更多......的需求......

  • 365

    以下代码将取消用于提交表单的输入键,但仍允许您在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>
    
  • 5

    在firefox中,当你输入并按回车键时,它将提交它的上层表格 . 解决方案是在提交表单中添加以下内容:

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

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

    提问者想要取消默认表单提交并调用他们自己的Ajax . 这是一个简单的解决方案 . 无需拦截输入到每个输入中的每个字符 .

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

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

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

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

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

    上面的代码和大多数解决方案是完善 . 但是,我认为最受欢迎的一个“简答案”是不完整的 .

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

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

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

相关问题