用JavaScript在文本框中的Enter键上触发按钮单击

我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时，进入键按下文本框内?

在我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将该按钮设置为提交按钮。并且，我只想让Enter键单击这个特定的按钮，如果它是从这个文本框中按下，没有其他。

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

当前回答

不过，我非常确定，只要表单中只有一个字段和一个提交按钮，按回车键就应该提交表单，即使页面上还有另一个表单。

然后你可以用js在提交时捕获表单，并做任何你想要的验证或回调。

其他回答

在现代，undeprecated(没有keyCode或onkeydown) Javascript:

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

不过，我非常确定，只要表单中只有一个字段和一个提交按钮，按回车键就应该提交表单，即使页面上还有另一个表单。

然后你可以用js在提交时捕获表单，并做任何你想要的验证或回调。

将按钮设置为submit元素，这样它就会自动执行。

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

请注意，您需要一个包含输入字段的<form>元素来完成此工作(感谢Sergey Ilinsky)。

重新定义标准行为并不是一个好的实践，Enter键应该总是调用表单上的提交按钮。

这些天改变事件的方式!

document.getElementById("txtSearch").addEventListener('change',
    () => document.getElementById("btnSearch").click()
);

这是为所有YUI爱好者提供的解决方案:

Y.on('keydown', function() {
  if(event.keyCode == 13){
    Y.one("#id_of_button").simulate("click");
  }
}, '#id_of_textbox');

在这种特殊情况下，我确实使用YUI来触发已注入按钮功能的DOM对象有更好的结果——但这是另一个故事……

推荐文章