在Firefox浏览器中，文本框内按下回车键不会触发提交按钮的onclick事件。

Question

在Firefox浏览器中，文本框内按下回车键不会触发提交按钮的onclick事件。

3

我有一个非常简单的html页面，它包含一个文本框和一个提交按钮。我的要求是，在文本框中输入内容并按下回车键时，调用按钮的onclick事件函数。在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>

- Yasmine

4个回答

1

尝试添加一个带有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>

- Dror

0

据我所知，您无法在“TextBox”内部调用“OnClick”。它必须在TextBox之外。

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

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

- Luke

0

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

在我的Chrome浏览器（4.0.223.11）中也无法工作。

问题在于处理没有<form>的<input>的差异--如果添加一个封闭的<form>元素，则onclick元素会触发（您仍应该使用表单的提交处理程序，如Johannes Rössel所建议的那样）。

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

请注意HTML5规范提到在提交按钮上分派单击事件：

用户代理可以将每个表单中的一个按钮设为表单的默认按钮。这应该是树顺序中第一个提交按钮，其表单所有者为该表单元素，但如果另一个按钮对于平台更合适，则用户代理可以选择另一个按钮。如果平台支持让用户隐式提交表单（例如，在某些平台上，当文本字段聚焦时按“enter”键会隐式提交表单），则这样做必须导致运行表单的默认按钮的激活行为（如果有）。

请注意，实现基于Enter键的激活并不是必需的（尽管在桌面浏览器中已经实现了），当输入是表单的一部分（"具有表单所有者"）时，可以使用"激活方法"（点击事件）。"表单所有者"的定义基于是否具有< form >父元素或< code >form属性。

我没有看到导致这个决定的讨论，所以如果你有问题，可以在公共HTML邮件列表上提问，规范会在那里进行讨论。

- Nickolay

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joey · Accepted Answer

根据“onclick”事件的描述:

当指针设备按钮在元素上单击时，将触发“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>