我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时，进入键按下文本框内?
在我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将该按钮设置为提交按钮。并且，我只想让Enter键单击这个特定的按钮，如果它是从这个文本框中按下，没有其他。
<input type="text" id="txtSearch" />
<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，以允许这段代码(大概)也可以在表单中工作。(我将对此进行测试，然后删除括号中的内容。)
其他回答
在简单的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给出一些东西。
你可以试试下面的jQuery代码。
$("#txtSearch").keyup(function(e) {
e.preventDefault();
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode === 13 || e.key === 'Enter')
{
$("#btnSearch").click();
}
});
不过，我非常确定，只要表单中只有一个字段和一个提交按钮，按回车键就应该提交表单，即使页面上还有另一个表单。
然后你可以用js在提交时捕获表单，并做任何你想要的验证或回调。
我的可重用Vanilla JS解决方案。因此，您可以根据激活的元素/文本框来更改点击哪个按钮。
<input type="text" id="message" onkeypress="enterKeyHandler(event,'sendmessage')" />
<input type="button" id="sendmessage" value="Send"/>
function enterKeyHandler(e,button) {
e = e || window.event;
if (e.key == 'Enter') {
document.getElementById(button).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();
}
});
