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键来点击按钮。使用我的代码，当我按下文本框内的Enter键时，单击按钮，但是在页面刷新后所有内容都重新启动，任何想法为什么以及如何防止它？

Answer 1

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

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

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

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

简化和澄清的方法：

由于点击okButton会调用JS_function()，而不是触发按钮上的点击事件，您可以直接从onKeyDown事件调用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();}

它将停止发布的默认操作，让您点击确定按钮。

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

2 个答案: