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

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

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

当前回答

在Angular2:

(keyup.enter)="doSomething()"

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

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

其他回答

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

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

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

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

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

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

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

用jQuery实现:

$("#txtSearch").on("keyup", function (event) {
    if (event.keyCode==13) {
        $("#btnSearch").get(0).click();
    }
});

用正常的JavaScript实现:

document.getElementById("txtSearch").addEventListener("keyup", function (event) {
    if (event.keyCode==13) { 
        document.getElementById("#btnSearch").click();
    }
});

这在情况下,你也想拨号进入按钮从发布到服务器和执行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();" />

由于还没有人使用addEventListener,这里是我的版本。给定这些元素:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

我会使用以下方法:

var go = document.getElementById("go");
var txt = document.getElementById("txt");

txt.addEventListener("keypress", function(event) {
    event.preventDefault();
    if (event.keyCode == 13)
        go.click();
});

这允许您分别更改事件类型和操作,同时保持HTML的整洁。

请注意,可能有必要确保它在<form>之外,因为当我将这些元素括在其中时,按Enter键提交了表单并重新加载了页面。我眨眼间就发现了。 附录:由于@ruffin的注释,我添加了缺少的事件处理程序和preventDefault,以允许这段代码(大概)也可以在表单中工作。(我将对此进行测试,然后删除括号中的内容。)