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


当前回答

以下是我的做法:

window.addEventListener('keydown', function(event)
{
    if (event.key === "Enter" && event.target.tagName !== 'TEXTAREA')
    {
        if(event.target.type !== 'submit')
        {
            event.preventDefault();
            return false;
        }
    }
});

其他回答

ENTER键仅仅激活表单的默认提交按钮,这将是第一个

<input type="submit" />

浏览器在表单中查找。

所以不要有提交按钮,而是类似的东西

<input type="button" value="Submit" onclick="submitform()" /> 

编辑:回应评论中的讨论:

如果只有一个文本字段,这就行不通了——但在这种情况下,这可能是理想的行为。

另一个问题是,这依赖于Javascript来提交表单。从可访问性的角度来看,这可能是一个问题。这可以通过用javascript编写<input type='button'/>来解决,然后在<noscript>标签中放入<input type='submit' />。这种方法的缺点是,对于禁用javascript的浏览器,您将在ENTER时提交表单。在这种情况下,由OP决定期望的行为是什么。

我知道没有办法做到这一点而不调用javascript。

stopSubmitOnEnter (e) {
  var eve = e || window.event;
  var keycode = eve.keyCode || eve.which || eve.charCode;

  if (keycode == 13) {
    eve.cancelBubble = true;
    eve.returnValue = false;

    if (eve.stopPropagation) {   
      eve.stopPropagation();
      eve.preventDefault();
    }

    return false;
  }
}

然后在表格上:

<form id="foo" onkeypress="stopSubmitOnEnter(e);">

不过,如果不使用突兀的JavaScript会更好。

另一种方法是仅在表单应该提交时才将提交输入按钮附加到表单,并在表单填充期间将其替换为简单的div

放入javascript外部文件

   (function ($) {
 $(window).keydown(function (event) {  

    if (event.keyCode == 13) {

        return false;
    }
});

 })(jQuery);

或者在body tag里面

<script>


$(document).ready(function() {
    $(window).keydown(function(event) {
        alert(1);

        if(event.keyCode == 13) {

            return false;
        }
    });
});

</script>

在我的案例中,这个jQuery JavaScript解决了这个问题

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               event.preventDefault();
               return false;
            });
}