在Firefox中，按下“回车键”不会提交表单，但在Chrome中会，为什么？

Question

我有一个非常基础的表单，当我按下回车键时，在Firefox浏览器中什么也不会发生，但在Google Chrome中会提交表单。还没有尝试其他浏览器...

在Firefox中按下回车键时根本没有任何反应。

在两个浏览器中点击提交按钮都可以正常工作。

这个表单位于一个DIV内，并且表单中也有JavaScript代码。这是简化后的表单：

<form id="nav_form_main" name="nav_form_main" action="bincgi/sql_query.php" target="iframe001" method="get" onSubmit="reset_pager();">

<input type="button" name="nav_submit" id="nav_submit" value="Search" onClick="reset_and_subm();" style="width: 58px; font-size: 13px;">

//some other elements...

</form>

以下是 JavaScript 代码：

function reset_pager(){
    byId("p").value = 0;
}
function reset_and_subm(){
    byId("p").value = 0;
    document.forms["nav_form_main"].submit();   
}

reset_pager函数根本没有被调用...这很奇怪，因为它是一个“onsubmit”函数。所以就像表单根本没有被提交一样。 然而，目标iframe中的结果看起来很好，没有任何问题。

有什么想法吗？

谢谢

- user188962

---

我所能想到的是表单内部出了问题，因为我有很多元素...你觉得呢？ - user188962

Answer 1

Enter键提交表单只有在表单中存在<input type="submit>时才会触发。您可以添加一个隐藏的按钮来达到这个目的，但请注意它将提交表单并绕过您想要捕获的onclick事件。您需要连接到表单的onsubmit操作以运行您的函数。

- Diodeus - James MacFarlane

---

请注意，如果您尝试使用类似于“display：none;”的内容来隐藏“<input type =”submit“>”，Chrome将防止按Enter键提交。相反，您需要保持其“显示状态”，但是使用类似于此的东西将其定位到遗忘中：<input type="submit" style="position: absolute; left: -10000px;top: -10000px;" /> - brettjonesdev

这是一篇非常老的帖子，但需要注意的是，如果您在提交按钮上定义了name属性<input type="submit" name="submit" value="submit"/>，则表单将无法在Chrome中提交。不知道为什么。但我调试了一个小时，所以想与大家分享。 - carruthd

这从来不是一个问题。现在我突然发现它，真的很想知道为什么、何时以及这种行为来自哪里。 - user619271

Answer 2

正如Diodeus所提到的，如果您想使用“ENTER”键提交表单，则需要在表单中添加一个<input type="submit">标签。

您的reset_pager函数未能在onsubmit事件上触发，因为onsubmit事件从未触发。尽管有些违反直觉，但在表单上使用submit()方法（就像您在reset_and_subm函数中所做的那样）不会导致onsubmit事件触发。

您有几个选项：

1. 您可以在表单中添加一个<input type="submit">，并将所有逻辑放在onsubmit回调函数中。
2. 监视表单上的所有keypress事件。如果按下“ENTER”键或单击按钮，则调用一个函数，在提交表单之前执行所有您想要发生的事情，然后在表单上调用submit()。

- ntownsend