jquery - 表单提交preventdefault - 阻止button提交




通过点击Enter阻止用户提交表单 (17)

我在一个网站上进行了一项调查,似乎有一些问题与用户点击输入(我不知道为什么),并意外提交调查(表单),而无需点击提交按钮。 有没有办法来防止这种情况?

我在调查中使用HTML,PHP 5.2.9和jQuery。


不要在任何地方输入密钥

如果您的表单中没有<textarea> ,则只需将以下内容添加到<form>

<form ... onkeypress="return event.keyCode != 13;">

或者用jQuery:

$(document).on("keypress", "form", function(event) { 
    return event.keyCode != 13;
});

这将导致表单中的每个按键都将在keyCode上进行检查。 如果它不是13(Enter键),那么它将返回true,任何事情都会按预期进行。 如果它是13(回车键),那么它将返回false,任何东西都会立即停止,所以表单将不会被提交。

keypress事件比keydownkeydown因为只有在实际插入字符时才会触发此事件。 当任何按键被按下时(包括控制键), keydown (和keyup )都会被触发。 而且, keyCode表示正在插入的实际字符,而不是使用的物理键。 这样您不需要明确检查Numpad Enter键(108)是否也被按下。 填表提交已经太迟了。

请注意,在其他答案(而不是$(document) $(window)中建议的$(window)在IE <= 8中不适用于keydown / keypress / keyup ,因此,如果您想要覆盖那些不好的用户以及。

只允许在textareas上输入密钥

如果你的表单中有一个<textarea> (当然应该接受Enter键),那么将keypress处理程序添加到不是<textarea>每个单独的输入元素。

<input ... onkeypress="return event.keyCode != 13;">
<select ... onkeypress="return event.keyCode != 13;">
...

为了减少样板,最好用jQuery来完成:

$(document).on("keypress", ":input:not(textarea)", function(event) {
    return event.keyCode != 13;
});

如果您在这些输入元素上附加了其他事件处理函数(您还希望在出于某种原因输入密钥时调用该函数),则只能防止事件的默认行为而不是返回false,以便它可以正确传播给其他处理程序。

$(document).on("keypress", ":input:not(textarea)", function(event) {
    if (event.keyCode == 13) {
        event.preventDefault();
    }
});

只允许在textareas上输入密钥并仅提交按钮

如果你想允许按下提交按钮<input|button type="submit"> ,那么你总是可以细化选择器如下。

$(document).on("keypress", ":input:not(textarea):not([type=submit])", function(event) {
    // ...
});

请注意,在某些其他答案中建议的input[type=text]不包括那些HTML5非文本输入,因此这不是一个好的选择器。


  1. 不要使用type =“submit”作为输入或按钮。
  2. 使用type =“button”并使用js [Jquery / angular / etc]将表单提交给服务器。

一种完全不同的方法:

  1. Enter键将激活表格中的第一个<button type="submit">
  2. 即使按钮被隐藏, style="display:none;
  3. 该按钮的脚本可以返回false ,从而中止提交过程。
  4. 你仍然可以有另一个<button type=submit>来提交表单。 只需返回到级联提交。
  5. 在实际提交按钮处于焦点时按Enter键将激活实际提交按钮。
  6. 按下<textarea>或其他窗体控件中的Enter将按照正常操作。
  7. 按下<input>表单控件中的Enter将触发第一个<button type=submit> ,它返回false ,因此没有任何反应。

从而:

<form action="...">
  <!-- insert this next line immediately after the <form> opening tag -->
  <button type=submit onclick="return false;" style="display:none;"></button>

  <!-- everything else follows as normal -->
  <!-- ... -->
  <button type=submit>Submit</button>
</form>

不要把提交按钮可以做到。 只需将脚本放入输入(type = button)或添加eventListener(如果您希望它在表单中提交数据)。

而是使用这个

<input type="button">

比使用这个

<input type="submit">

与其阻止用户按Enter键看起来不自然,您可以按原样保留表格并添加一些额外的客户端验证:当调查未完成时,结果不会发送到服务器,用户会收到一条好消息告诉需要完成的表格。 如果您使用jQuery,请尝试验证插件:

http://docs.jquery.com/Plugins/Validation

这需要比捕捉Enter按钮更多的工作,但它肯定会提供更丰富的用户体验。


为了防止表单被提交,我必须捕获与按键相关的所有三个事件:

    var preventSubmit = function(event) {
        if(event.keyCode == 13) {
            log("caught ya!");
            event.preventDefault();
            //event.stopPropagation();
            return false;
        }
    }
    $("#search").keypress(preventSubmit);
    $("#search").keydown(preventSubmit);
    $("#search").keyup(preventSubmit);

您可以将以上所有内容组合成一个精美的简洁版本:

    $('#search').bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });

使用:

// Validate your form using the jQuery onsubmit function... It'll really work...

$(document).ready(function(){
   $(#form).submit(e){
       e.preventDefault();
       if(validation())
          document.form1.submit();
   });
});

function validation()
{
   // Your form checking goes here.
}

<form id='form1' method='POST' action=''>
    // Your form data
</form>

在其他解决方案受挫之后,这对所有浏览器都有效。 name_space外部函数只是为了远离声明全局变量,我也推荐。

$(function() {window.name_space = new name_space();}); //jquery doc ready
function name_space() {
    this.is_ie = (navigator.userAgent.indexOf("MSIE") !== -1);

    this.stifle = function(event) {
        event.cancelBubble;
        event.returnValue = false;
        if(this.is_ie === false) {
            event.preventDefault();
        }
        return false;
    }

    this.on_enter = function(func) {
        function catch_key(e) {
            var enter = 13;
            if(!e) {
                var e = event;
            }
            keynum = GetKeyNum(e);
            if (keynum === enter) {
                if(func !== undefined && func !== null) {
                    func();
                }
                return name_space.stifle(e);
            }
            return true; // submit
        }

        if (window.Event) {
            window.captureEvents(Event.KEYDOWN);
            window.onkeydown = catch_key;
        }
        else {
            document.onkeydown = catch_key;
        }

        if(name_space.is_ie === false) {
            document.onkeypress = catch_key;    
        }
    }
}

使用示例:

$(function() {
    name_space.on_enter(
        function () {alert('hola!');}
    );
});

在我的情况下,我在表单中有几个jQuery UI自动填充字段和textareas,所以我绝对希望他们接受Enter 。 因此,我从表单中删除了type="submit"输入,并添加了一个锚点<a href="" id="btn">Ok</a> 。 然后,我将它作为一个按钮进行了设置,并添加了以下代码:

$( '#btn' ).click( function( event ){
    event.preventDefault();
    if ( validateData() ){
        $( 'form#frm' ).append( '<input type="submit" id="frm-submit" style="display:none;"></input>' );
        setTimeout( function(){ $( '#frm-submit' ).click(); }, 500 );
    }
    return false;
});

如果用户填写所有必填字段,则validateData()成功并提交表单。


如果您使用脚本来执行实际提交,那么您可以将“return false”行添加到onsubmit处理程序,如下所示:

<form onsubmit="return false;">

从JavaScript调用submit()方法不会触发事件。


您可以使用诸如。的方法

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

在阅读关于原始帖子的评论时,为了使其更加可用,并允许人们在完成所有字段后按Enter键

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

我只需要防止提交特定的输入,所以我使用了一个类选择器,让它成为我需要的任何“全局”特性。

<input id="txtEmail" name="txtEmail" class="idNoEnter" .... />

而这个jQuery代码:

$('.idNoEnter').keydown(function (e) {
  if (e.keyCode == 13) {
    e.preventDefault();
  }
});

或者,如果keydown不足:

$('.idNoEnter').on('keypress keydown keyup', function (e) {
   if (e.keyCode == 13) {
     e.preventDefault();
   }
});

一些说明:

在这里修改各种好的答案, Enter键似乎适用于所有浏览器上的keydown 。 另外,我更新了bind() on()方法。

我是选课人员的忠实粉丝,权衡利弊和表现讨论。 我的命名约定是'idSomething',表明jQuery使用它作为id,将它与CSS样式分开。


我想添加一点CoffeeScript代码(未经过现场测试):

$ ->
    $(window).bind 'keypress', (event) ->
        if event.keyCode == 13
            unless {'TEXTAREA', 'SELECT'}[event.originalEvent.srcElement.tagName]
                event.preventDefault()

(我希望你喜欢在除外条款中的好玩法。)


我有一个类似的问题,我有一个带有“ajax textfields”(Yii CGridView)的网格,只有一个提交按钮。 每次我在文本字段上进行搜索并点击输入提交的表单。 我不得不对按钮做些什么,因为它是视图之间唯一的常用按钮(MVC模式)。 我所要做的就是删除type="submit"并把onclick="document.forms[0].submit()


我还不能评论,所以我会发布一个新的答案

接受的答案是好的,但它并没有停止提交数字键盘输入。 至少在当前版本的Chrome中。 我必须改变键码的条件,然后才能正常工作。

if(event.keyCode == 13 || event.keyCode == 169) {...}

给表单一个'javascript:void(0)'的动作'' 似乎有窍门

<form action="javascript:void(0);">
<input type="text" />
</form>
<script>
$(document).ready(function() {
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
    alert('Hello');
        }
    });
});
</script>

这对我有用

jQuery.each($("#your_form_id").find('input'), function(){
    $(this).bind('keypress keydown keyup', function(e){
       if(e.keyCode == 13) { e.preventDefault(); }
    });
});




form-submit