我有一个文本输入和一个按钮(见下文)。我如何使用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文档
支持的浏览器
其他回答
我算出来了:
<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />
<script>
function searchKeyPress(e)
{
// look for window.event in case event isn't passed in
e = e || window.event;
if (e.keyCode == 13)
{
document.getElementById('btnSearch').click();
return false;
}
return true;
}
</script>
不过，我非常确定，只要表单中只有一个字段和一个提交按钮，按回车键就应该提交表单，即使页面上还有另一个表单。
然后你可以用js在提交时捕获表单，并做任何你想要的验证或回调。
对于那些可能喜欢简洁和现代js方法的人。
input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()});
其中input是包含input元素的变量。
在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，以允许这段代码(大概)也可以在表单中工作。(我将对此进行测试，然后删除括号中的内容。)
