Fatal编程技术网
  • javascript/
  • Javascript 在文本框中按enter键不会触发firefox中submit按钮的onclick事件

Javascript 在文本框中按enter键不会触发firefox中submit按钮的onclick事件

javascript firefox forms

Javascript 在文本框中按enter键不会触发firefox中submit按钮的onclick事件,javascript,firefox,cross-browser,forms,Javascript,Firefox,Cross Browser,Forms,我有一个非常简单的html页面，它包含一个文本框和一个submit按钮，我想要的是在文本框中键入内容并按下enter键时调用按钮onclick事件中的函数。它在IE和Google Chrome中工作，但在FireFox中不工作，这是FireFox的正常行为还是我缺少了什么 <html> <head> <script language="javascript"> function callMe() { alert("You entered: " + doc

我有一个非常简单的html页面，它包含一个文本框和一个submit按钮，我想要的是在文本框中键入内容并按下enter键时调用按钮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>


函数callMe（）
{
警报（“您输入的：”+document.getElementById（“txt”）.value）；
}
来自：

当在元素上单击定点设备按钮时，会发生
onclick
事件。此属性可用于大多数元素

即使不使用定点设备并单击某个对象，也不能保证UA会生成此类事件

您可能希望表单上出现
onsubmit
事件：

提交表单时会发生
onsubmit
事件。它只适用于元素

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

<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>


函数callMe（）
{
警报（“您输入的：”+document.getElementById（“txt”）.value）；
}
尝试添加带有onsubmit的表单-这应该可以工作（使用FF 3.5测试）：


函数callMe（）
{
警报（“您输入的：”+document.getElementById（“txt”）.value）；
}
[编辑最初我误解了情况，发布了不同的答案。]

在Chrome中对我也不起作用（4.0.223.11）

问题是在不使用的情况下处理s的区别——如果添加一个封闭元素，onclick元素将激发（正如johannesrössel正确建议的那样，您仍然应该使用表单的提交处理程序）

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

请注意：

用户代理可以在每个表单中建立一个按钮作为表单的默认按钮。这应该是树顺序中表单所有者为该表单元素的第一个提交按钮，但如果另一个按钮更适合平台，则用户代理可以选择另一个按钮。如果平台支持让用户隐式提交表单（例如，在某些平台上，当文本字段处于焦点时，按下“enter”键会隐式提交表单），则这样做必须导致运行表单的默认按钮的激活行为（如果有）。 请注意，不需要实现基于Enter的激活（尽管它是在桌面浏览器中实现的），并且当输入是表单的一部分（“具有表单所有者”）时，可以使用“激活方法”（单击事件）。“表单所有者”的定义基于具有父级或
表单
属性

我没有看到导致这个决定的讨论，所以如果你有问题，你可以在公共html邮件列表中询问讨论规范的地方。

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

如果在文本框中键入文本，用鼠标左键单击页面上的其他位置，然后按Enter键，OnClick事件将正常工作，这一点很奇怪

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

我用以下代码替换了我的代码：现在IE和FF中都没有调用该函数，发生的情况是当在文本框内按enter键时，页面被重新加载，文本被清除。我理解onclick意味着单击元素，但为什么IE和Chrome在pr时触发事件essing enter和FF没有？很抱歉，现在调用了该函数，我在这两个函数中都得到了警报，但页面被重新加载，框被清除，但这不是我想要的，至少在FF中是这样。它没有重新加载。我包括了一个
action=“#”
虽然这永远不会触发重新加载。但我不能完全确定这一点。如果输入具有| name |，则页面将重新加载（因为新URL将包含参数值），这就是提交表单的点。如果不希望重新加载，则应从提交处理程序（| return callMe（）|在callMe return false中）。好的，return false起作用，并且action=“#”但是我用action=“javascript:void（0）”替换了它，这样就不会将#附加到地址栏中的url 
<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>