我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时，进入键按下文本框内?
在我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将该按钮设置为提交按钮。并且，我只想让Enter键单击这个特定的按钮，如果它是从这个文本框中按下，没有其他。
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
当前回答
这些天改变事件的方式!
document.getElementById("txtSearch").addEventListener('change',
() => document.getElementById("btnSearch").click()
);
其他回答
document.onkeypress = function (e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode == 13) {
// Do something here
printResult();
}
};
这是我的意见。我正在为Windows 8开发一个应用程序，并希望按钮在我按Enter键时注册一个单击事件。我在JS中做这个。我尝试了一些建议，但都有问题。这工作得很好。
为了添加一个完全简单的JavaScript解决方案来解决@icedwater的表单提交问题，这里有一个完整的表单解决方案。
注意:这是针对“现代浏览器”，包括IE9+。IE8版本并不复杂，可以在这里学习。
小提琴:https://jsfiddle.net/rufwork/gm6h25th/1/
HTML
<body>
<form>
<input type="text" id="txt" />
<input type="button" id="go" value="Click Me!" />
<div id="outige"></div>
</form>
</body>
JavaScript
// The document.addEventListener replicates $(document).ready() for
// modern browsers (including IE9+), and is slightly more robust than `onload`.
// More here: https://stackoverflow.com/a/21814964/1028230
document.addEventListener("DOMContentLoaded", function() {
var go = document.getElementById("go"),
txt = document.getElementById("txt"),
outige = document.getElementById("outige");
// Note that jQuery handles "empty" selections "for free".
// Since we're plain JavaScripting it, we need to make sure this DOM exists first.
if (txt && go) {
txt.addEventListener("keypress", function (e) {
if (event.keyCode === 13) {
go.click();
e.preventDefault(); // <<< Most important missing piece from icedwater
}
});
go.addEventListener("click", function () {
if (outige) {
outige.innerHTML += "Clicked!<br />";
}
});
}
});
对于jQuery移动，我必须做:
$('#id_of_textbox').live("keyup", function(event) {
if(event.keyCode == '13'){
$('#id_of_button').click();
}
});
你可以使用的一个基本技巧，我还没有看到完全提到。如果你想在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来加载一些数据。
不过，我非常确定，只要表单中只有一个字段和一个提交按钮，按回车键就应该提交表单，即使页面上还有另一个表单。
然后你可以用js在提交时捕获表单，并做任何你想要的验证或回调。
