在文本框中按Enter键不会触发firefox中的提交按钮的onclick事件
-
10-07-2019 - |
题
我有这个非常简单的html页面,它包含一个文本框和一个提交按钮,我想要的是在文本框中键入内容并按下按钮的onclick事件中的输入函数被调用。它在IE和谷歌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>
解决方案
在元素上单击指针设备按钮时会发生
onsubmit
事件。此属性可用于大多数元素。
即使不使用指点设备并点击某些内容,也无法保证UA应该生成此类事件。
您可能希望在表单上使用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>
其他提示
尝试添加带有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>
[编辑最初我误解了这种情况并发布了不同的答案。]
对我来说在Chrome中也不起作用(4.0.223.11)。
问题是在没有<!> lt; form <!> gt;处理<!> lt; input <!> gt; s的区别。 - 如果你添加一个封闭的<!> lt; form <!> gt;元素,onclick元素触发(你应该仍然使用表单的提交处理程序,如Johannes R <!>#246; ssel正确推荐。
[编辑添加了关于HTML5的说明]
用户代理可以在每个表单中建立一个按钮作为表单的默认按钮。这应该是树形顺序中的第一个提交按钮,其表单所有者是该表单元素,但如果另一个按钮更适合该平台,则用户代理可以选择另一个按钮。如果平台支持让用户隐式提交表单(例如,在某些平台上点击<!>“;输入<!>”键,而文本字段被聚焦则隐式提交表单),那么这样做必须导致表单的默认按钮的激活行为(如果有)。
请注意,不需要实现基于Enter的激活(尽管它在桌面浏览器中实现),并且<!>激活方法<!>当输入是表单的一部分时,可以使用(单击事件)(<!>“;表单所有者<!>”;)。 <!> quot; form owner <!>的定义;是基于<!> lt; form <!> gt;父级或form
属性。
我没有看到导致此决定的讨论,所以如果您有疑问,可以在public-html邮件列表中询问讨论规范的位置。
据我所知,你不能在'TextBox'中调用'OnClick'。它必须在TextBox之外。
如果您在TextBox中键入文本,鼠标左键单击页面上的其他位置,然后按Enter键,OnClick事件将起作用,奇怪的是。
如果您找到合适的地方,请告诉我们。