EventListener Enter 键[重复]答案

【问题标题】：EventListener Enter Key [duplicate]EventListener Enter 键[重复]
【发布时间】：2013-01-26 22:06:46
【问题描述】：

Enter 键是否有addEventListener？

我有

document.querySelector('#txtSearch').addEventListener('click', search_merchants);

我知道这是为<button> 准备的，但想知道是否有对应的方法可以捕获 Enter 键。

【问题讨论】：

【解决方案1】：

您要提交表单吗？

改为收听submit 事件。

这将处理click 和enter。

如果你必须使用回车键...

document.querySelector('#txtSearch').addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      // code for enter
    }
});

【讨论】：

作为提示，document.addEventListener('keypress', function (e) {}。直接使用而不使用querySelector，以防您需要更多响应，例如登录表单。
一个重要的细节 e.which 和 e.keyCode 目前已被弃用，新的正确方法是 e.key 参考 //e.which developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which //e.keyCode developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode //e.key developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

【解决方案2】：

这是当前接受的答案的一个版本（来自@Trevor），使用key 而不是keyCode：

document.querySelector('#txtSearch').addEventListener('keypress', function (e) {
    if (e.key === 'Enter') {
      // code for enter
    }
});

【讨论】：

不要复制/粘贴相同的答案，在一个地方发布然后投票关闭另一个地方，就像我刚刚做的那样。
Is it ok to copy/paste myself?
我的两个类似的答案（不是精确的复制/粘贴）是我试图传播有关 event.key 的信息。但是您的评论和反对票让我阅读了更多关于标记和相关主题的信息，以减少我对 Stack Overflow 礼仪的无知，所以谢谢。

【解决方案3】：

您可以监听'keydown' 事件，然后检查是否有回车键。

你的处理程序是这样的：

function (e) {
  if (13 == e.keyCode) {
     ... do whatever ...
  }
}

【讨论】：

使用一些常量作为键码不是更好吗？
window.addEventListener("keydown", function (e) { if (13 == e.keyCode) { alert('a okooo enter') } });