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


当前回答

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

jQuery(function() {
            jQuery("form.myform").submit(function(event) {
               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 (⌐■_■)");
    }
});

我认为,你可以在javascript的表单中捕获键下,防止冒泡。网页上的ENTER基本上只是提交当前所选控件所在的表单。

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

<input type="submit" />

浏览器在表单中查找。

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

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

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

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

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

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

这对我很管用。 onkeydown = "返回! (event.keyCode = = 13)”

    <form id="form1" runat="server" onkeydown="return !(event.keyCode==13)">

   </form>

简单地添加这个属性到你的FORM标签:

onsubmit="return gbCanSubmit;"

然后,在你的SCRIPT标签中,添加这个:

var gbCanSubmit = false;

然后,当你创建一个按钮或出于任何其他原因(比如在函数中)你最终允许提交时,只需翻转全局布尔值并执行.submit()调用,类似于下面的示例:

function submitClick(){

  // error handler code goes here and return false if bad data

  // okay, proceed...
  gbCanSubmit = true;
  $('#myform').submit(); // jQuery example

}