当我在网页上的输入元素上按enter键时触发的JavaScript事件侦听器

我对JavaScript非常陌生。我试图找出用户何时在网页中的输入元素上点击enter键（例如，中的Google搜索栏）。到目前为止，我已经尝试了以下代码：

document.querySelector('input').addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
        console.log('Enter pressed');
    }
});

但这似乎不起作用。我肯定我做错了什么。有人能帮我吗

---

更新：我正在尝试在不使用输入id的情况下获取输入元素。

您需要将

eventListener

更改为

keyup

document.querySelector（'input'）。addEventListener（'keyup'，函数（e）{
控制台日志（e）
如果（e.key=='Enter'）{
console.log（'Enter pressed'）；
}
});

inp.addEventListener（'keypress'，函数（e）{
如果（例如，代码==“输入”）{
numb.innerHTML=+numb.innerHTML+1；
}
});

0
因此，您希望将事件侦听器附加到页面中的所有输入元素，即使是动态创建的元素，那么您需要使用事件委派，在本例中，对于body元素，因为它将始终存在，下面是一个简单的解决方案：


document.body.addEventListener（'keypress'，函数（e）{
//检查元素是否为'input'元素且键是否为'enter'`
如果（e.target.nodeName==“输入”&&e.key==“输入”）{
console.log（'按Enter键，值为：'+e.target.value）；
}
});
输入{
显示：块；
填充：10px；
边缘底部：10px；
边界：无；
底部边框：2个亮绿色脊；
边界半径：5px5px0；
盒影：-2px-2px 5px rgba（0,255,0,0.7）；
}

通常我们使用
keyup
@Ifaruki，但在这种情况下没有什么区别。当我在文档中使用“body”而不是输入时，这种方法有效。querySelector（'input'）。addEventListener（'keyup'，function（e）。但当我使用“输入”时，它不起作用。“输入”错误吗？我正在尝试将所有输入元素作为目标。您的输入元素HTML是什么样子的？我没有创建任何输入HTML。我正在尝试从谷歌等网站访问元素。例如，如果我在www.google.com上的谷歌搜索栏上按enter键，我需要事件您可以创建一个chrome扩展并用它捕获值
0
我应该在哪里插入这些行？@onetrueshad这是HTMLH当我在谷歌搜索栏上按enter键时效果很好。但我尝试在自动完成选项上按enter键，但当时逻辑不起作用。是否也可以包括该场景？请您指向该网页，以便我可以查看其内部实现我正在关注我们e这在多个网页上，如google.com、duckduckgo.com和suchI看到了提交表单的功能。是否可以提交不带表单id的表单。这可能会解决此问题，因为无论用户在搜索栏上点击enter键或autocomplete选项，都会调用该功能。我在这里单独问了一个问题 ->