我有一个文本输入和一个按钮(见下文)。我如何使用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来加载一些数据。

其他回答

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

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

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

你可以使用的一个基本技巧,我还没有看到完全提到。如果你想在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来加载一些数据。

在简单的JavaScript中,

if (document.layers) {
  document.captureEvents(Event.KEYDOWN);
}

document.onkeydown = function (evt) {
  var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode;
  if (keyCode == 13) {
    // For Enter.
    // Your function here.
  }
  if (keyCode == 27) {
    // For Escape.
    // Your function here.
  } else {
    return true;
  }
};

我注意到这个回复是用jQuery给出的,所以我想用简单的JavaScript给出一些东西。

这些天改变事件的方式!

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

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