在文本框中按 Enter 不会触发 Firefox 中提交按钮的 onclick 事件答案

【问题标题】：Pressing enter inside a textbox does not fire onclick event of submit button in firefox在文本框中按 Enter 不会触发 Firefox 中提交按钮的 onclick 事件
【发布时间】：2010-12-11 04:46:04
【问题描述】：

我有这个非常简单的 html 页面，它包含一个文本框和一个提交按钮，我想要的是在文本框中输入内容并在按钮的 onclick 事件中按下 enter 函数时被调用。它在 IE 和 Google Chrome 中工作，但在 FireFox 中不工作，这是 FireFox 的正常行为还是这里缺少什么？

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<input type="text" id="txt" />
<input type="submit" value="Submit" onclick="callMe()" />
</body>
</html>

【问题讨论】：

标签： javascript firefox cross-browser forms

【解决方案1】：

来自description of the onclick event：

onclick 事件发生在指针设备按钮在元素上单击时发生。该属性可用于大多数元素。

即使不使用指点设备并点击某些东西，也无法保证 UA 会生成这样的事件。

您可能希望在表单上显示onsubmit 事件：

onsubmit 事件在提交表单时发生。它仅适用于FORM 元素。

不过，您需要在文本字段和按钮周围包裹一个表单：

<html>
  <head>
    <script language="javascript">
      function callMe()
      {
        alert("You entered: " + document.getElementById("txt").value);
      }
    </script>
  </head>
  <body>
    <form onsubmit="callMe()" action="#">
      <input type="text" id="txt" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

【讨论】：

我用这个替换了我的代码：

现在在 IE 和 FF 中都没有调用该函数，发生的情况是当在文本框中按 enter 时页面被重新加载并且文本被清除。我知道onclick意味着点击元素，但是为什么IE和Chrome在按下回车时触发了事件而FF没有？
对不起，该函数现在被调用了，我都收到了警报，但是页面被重新加载并且框被清除了，但这不是我想要的
它在这里工作，至少在 FF 中。而且它不会重新加载。我包括了一个action="#"，但它永远不会触发重新加载。但我并不完全确定。
好吧，如果输入有 |name|，页面将重新加载（因为新 URL 将包含参数值），这就是提交表单的重点。如果您不想重新加载，您应该从提交处理程序中取消提交（|return callMe()| 并且在 callMe 中返回 false）。
好的，返回 false 工作并且 action="#" 但我将它替换为 action="javascript:void(0)" 以便 # 不会附加到地址栏中的 url

【解决方案2】：

尝试添加一个带有 onsubmit 的表单 - 这应该可以工作（用 FF 3.5 测试）：

<html>
<head>
<script language="javascript">
function callMe()
{
   alert("You entered: " + document.getElementById("txt").value);
}
</script>
</head>
<body>
<form onsubmit="callMe()">
<input type="text" id="txt" />
<input type="submit" value="Submit" />
</form>
</body>
</html>

【讨论】：

【解决方案3】：

[编辑最初我误解了情况并发布了不同的答案。]

我也无法在 Chrome 中使用 (4.0.223.11)。

问题是在没有

元素，onclick 元素会触发（你仍然应该使用表单的提交处理程序，正如 Johannes Rössel 正确的那样推荐。

[编辑添加了关于 HTML5 的注释]

注意HTML5 spec mentions dispatching the click event on the submit button:

用户代理可以在每个表单中建立一个按钮作为表单的默认按钮。这应该是树形顺序中的第一个提交按钮，其表单所有者是该表单元素，但如果另一个按钮更适合平台，用户代理可能会选择另一个按钮。如果平台支持让用户隐式提交表单（例如，在某些平台上，在文本字段集中时按下“enter”键会隐式提交表单），那么这样做必须导致表单的默认按钮的激活行为，如果有的话, 待运行。

注意，不需要实现基于 Enter 的激活（虽然它在桌面浏览器中实现），并且当输入是表单的一部分时可以使用“激活方法”（点击事件）（“有一个表单所有者”）。 “表单所有者”的定义基于具有

父级或 form 属性。

我没有看到导致此决定的讨论，因此如果您有任何疑问，可以在讨论规范的 public-html 邮件列表中提问。

【讨论】：

【解决方案4】：

据我所知，您不能在“文本框”内调用“OnClick”。它必须在 TextBox 之外。

如果您在 TextBox 中键入文本，鼠标左键单击页面上的其他位置，然后按 Enter，OnClick 事件将起作用，这很奇怪。

如果您找到解决方法，请告诉我们。

【讨论】：