如何防止在基于web的应用程序中按ENTER键提交表单?


当前回答

我花了一些时间制作这款跨浏览器,适用于IE8、9、10、Opera 9+、Firefox 23、Safari(PC)和Safari(MAC)

示例:http://jsfiddle.net/greatbigmassive/ZyeHe/

基本代码-通过“onkeypress”附加到您的窗体和传递窗口调用此函数。事件”。

function stopEnterSubmitting(e) {
    if (e.keyCode == 13) {
        var src = e.srcElement || e.target;
        if (src.tagName.toLowerCase() != "textarea") {
            if (e.preventDefault) {
                e.preventDefault();
            } else {
                e.returnValue = false;
            }
        }
    }
}

其他回答

这个链接提供了一个在Chrome、FF和IE9以及IE7和ie8的模拟器(IE9的开发者工具(F12)中为我工作过的解决方案。

http://webcheatsheet.com/javascript/disable_enter_key.php

在过去,我总是用类似上面的按键处理程序来完成它,但今天遇到了一个更简单的解决方案。输入键只是触发表单上第一个未禁用的提交按钮,所以实际上所需要的只是拦截试图提交的按钮:

<form>
  <div style="display: none;">
    <input type="submit" name="prevent-enter-submit" onclick="return false;">
  </div>
  <!-- rest of your form markup -->
</form>

就是这样。按键将像往常一样由浏览器/字段等处理。如果进入-提交逻辑被触发,那么浏览器将找到隐藏的提交按钮并触发它。javascript处理程序会阻止提交。

防止“ENTER”提交表单可能会给一些用户带来不便。所以你最好按照下面的步骤来做:

在你的表单标签中写入'onSubmit'事件:

<form name="formname" id="formId" onSubmit="return testSubmit()" ...>
 ....
 ....
 ....
</form>

编写Javascript函数如下:

function testSubmit(){
  if(jQuery("#formId").valid())
      {
        return true;
      }
       return false;

     } 

     (OR)

不管是什么原因,如果你想阻止按Enter键提交表单,你可以用javascript写下面的函数:

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

谢谢。

如果这些答案都不适合你,试试这个。在实际提交表单的按钮之前添加一个提交按钮,对事件什么都不做。

HTML

<!-- The following button is meant to do nothing. This button will catch the "enter" key press and stop it's propagation. -->
<button type="submit" id="EnterKeyIntercepter" style="cursor: auto; outline: transparent;"></button>

JavaScript

$('#EnterKeyIntercepter').click((event) => {
    event.preventDefault(); //The buck stops here.
    /*If you don't know what this if statement does, just delete it.*/
    if (process.env.NODE_ENV !== 'production') {
        console.log("The enter key was pressed and captured by the mighty Enter Key Inceptor (⌐■_■)");
    }
});
//Turn off submit on "Enter" key

$("form").bind("keypress", function (e) {
    if (e.keyCode == 13) {
        $("#btnSearch").attr('value');
        //add more buttons here
        return false;
    }
});