为什么带有输入文本框和在Enter键上调用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>

我希望能够通过在文本框内按Enter来单击按钮。 使用我的代码，当我在文本框中按下回车键时单击该按钮，但是在刷新页面并重新启动所有内容之后立即单击，是否有任何想法以及为什么要防止它？

Answer 1

我相信问题在于，按Enter键会触发表单发布。 由于您的操作属性为空，因此表单将发布到当前页面，看起来就像重新加载一样。

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

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

您还可以在事件上调用.preventDefault()方法，该方法将执行相同的操作。

一种简化和澄清的方法：

由于单击okButton会调用JS_function() ，而不是触发按钮的click-Event，因此您可以直接从onKeyDown-event调用JS_function() 。

<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();}

它将停止默认的发布操作，并让您完成诸如单击“确定”按钮之类的工作。