我有一个文本输入和一个按钮(见下文)。我如何使用JavaScript触发按钮的点击事件时，进入键按下文本框内?
在我的当前页面上已经有一个不同的提交按钮，所以我不能简单地将该按钮设置为提交按钮。并且，我只想让Enter键单击这个特定的按钮，如果它是从这个文本框中按下，没有其他。
<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />
当前回答
使用按键和事件。键=== "进入"与现代JS!
const textbox = document.getElementById("txtSearch");
textbox.addEventListener("keypress", function onEvent(event) {
if (event.key === "Enter") {
document.getElementById("btnSearch").click();
}
});
Mozilla文档
支持的浏览器
其他回答
在Angular2:
(keyup.enter)="doSomething()"
如果您不希望按钮中有一些视觉反馈，那么不引用按钮而是直接调用控制器是一个很好的设计。
另外，id也不需要——这是NG2分离视图和模型的另一种方式。
由于还没有人使用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，以允许这段代码(大概)也可以在表单中工作。(我将对此进行测试，然后删除括号中的内容。)
你可以试试下面的jQuery代码。
$("#txtSearch").keyup(function(e) {
e.preventDefault();
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode === 13 || e.key === 'Enter')
{
$("#btnSearch").click();
}
});
每次按下回车键时触发搜索，使用以下命令:
$(document).keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
$('#btnSearch').click();
}
}
试一试:
<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>
<script>
window.onload = function() {
document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
if (event.keyCode == 13) {
document.getElementById('btnSearch').click();
}
};
document.getElementById('btnSearch').onclick =doSomething;
}
</script>
