javascript - 为什么带有输入文本框和按钮的表单会在输入键时调用 javascript 函数？

Question

<form action="">
<input id="user_input" onKeyDown="if(event.keyCode == 13)document.getElementById('okButton').click()" >
<input id="okButton" type="button" onclick="JS_function();" value="OK">
</form>

我希望能够在文本框内按回车键来单击按钮。使用我的代码，当我在文本框中按回车键时，按钮被单击，但在页面刷新并且一切重新启动后立即单击，任何想法为什么以及如何防止它？

Answer 1

我认为问题在于按 Enter 键会触发表单发布。由于您有一个空的动作属性，表单将发布到当前页面，这看起来像是重新加载。

为了防止浏览器默认行为在 Enter 上发布表单，请尝试false从您的 onKeyDown-callback 中返回。

if(event.keyCode == 13) { document.getElementById('okButton').click(); return false; }

您也可以.preventDefault()在事件上调用该方法，这将做同样的事情。

一种简化和澄清的方法：

由于单击 okButton 将调用JS_function()，而不是触发按钮上的单击事件，您可以JS_function()直接从 onKeyDown-event 调用。

<input id="user_input" onKeyDown="if(event.keyCode == 13) { JS_function(); return false; }" >

Answer 2

在你的 onKeyDown 中使用它

if(event.keyCode == 13){event.preventDefault(); document.getElementById('okButton').click();}

它将停止发布的默认操作，并让您执行您的操作，例如单击确定按钮。