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

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

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

当前回答

你可以使用的一个基本技巧,我还没有看到完全提到。如果你想在Enter上做一个ajax动作,或者其他一些工作,但不想实际提交表单,你可以这样做:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

像这样设置action="javascript:void(0);"本质上是防止默认行为的快捷方式。在这种情况下,无论您是按回车键还是单击按钮,都会调用一个方法,并调用ajax来加载一些数据。

其他回答

在Angular2:

(keyup.enter)="doSomething()"

如果您不希望按钮中有一些视觉反馈,那么不引用按钮而是直接调用控制器是一个很好的设计。

另外,id也不需要——这是NG2分离视图和模型的另一种方式。

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

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

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

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

没有人注意到html属性“accesskey”已经有一段时间了。

这是一个没有javascript的方式来键盘快捷键的东西。

MDN上的accesskey属性快捷方式

故意这样使用的html属性本身就足够了,但是我们可以根据浏览器和操作系统改变占位符或其他指示符。该脚本是一个未经测试的草稿方法,以提供一个想法。您可能想要使用一个浏览器库检测器,比如小浏览器器

让客户知道。 linux =客户。indexOf(linux) > -1, isWin =客户。索引(“windows”> -1, “苹果”> -1, isFirefox =客户索引= -1, 网络工具=客户,索引(“网络工具”)> -1, (歌剧)> -1, 输入=文档。getElementById(“guest输入”); 如果(isFirefox) { 输入。setAttribute(“placeholder”、“ALT + SHIFT + Z”); 否则如果 输入。setAttribute (placeholder”、“ALT + Z”); 否则如果(isMac) 输入。setAttribute(“placeholder”、“CTRL + ALT + Z”); 否则 输入。setAttribute(“placeholder”、“SHIFT +逃亡- > Z”); 否则我就得操作… <输入类型=“文本”id=“guest输入”“accesskey”placeholder=“Acces快捷方式:”></输入>

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

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

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

这在情况下,你也想拨号进入按钮从发布到服务器和执行Js脚本。

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />