如何检测 Javascript 中的按键？

Question

在互联网上环顾四周后，我看到了很多建议（使用 window.onkeypress，使用 jQuery 等），但几乎每个选项都有一个反驳。如何检测 Javascript 中的按键？

原文由 bobismijnnaam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用纯 Javascript，最简单的是：

 document.onkeypress = function (e) {
    e = e || window.event;
    // use e.keyCode
};

但是这样一来，您只能为事件绑定一个处理程序。

此外，您可以使用以下内容潜在地将多个处理程序绑定到同一事件：

 addEvent(document, "keypress", function (e) {
    e = e || window.event;
    // use e.keyCode
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

在任何一种情况下， keyCode 在浏览器中都不一致，因此需要检查和找出更多内容。注意 e = e || window.event - 这是 Internet Explorer 的正常问题，将事件放入 window.event 而不是将其传递给回调。

参考：

• https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/keypress
• https://developer.mozilla.org/en-US/docs/DOM/EventTarget.addEventListener

使用 jQuery：

 $(document).on("keypress", function (e) {
    // use e.which
});

参考：

• http://api.jquery.com/on/

除了 jQuery 是一个“大型”库之外，jQuery 确实有助于解决浏览器之间的不一致问题，尤其是窗口事件……这是不可否认的。希望很明显，我为您的示例提供的 jQuery 代码更优雅、更短，但以一致的方式完成了您想要的工作。您应该能够相信 e （事件）和 e.which （键码，用于知道按下了哪个键）是准确的。在纯 Javascript 中，除非您执行 jQuery 库内部所做的所有事情，否则很难知道。

请注意，有一个 keydown 事件，它不同于 keypress 。您可以在此处了解有关它们的更多信息： onKeyPress Vs。 onKeyUp 和 onKeyDown

至于建议使用什么，如果您准备学习该框架，我肯定会建议使用 jQuery。同时，我想说你应该学习 Javascript 的语法、方法、特性，以及如何与 DOM 交互。一旦你理解了它是如何工作的以及发生了什么，你应该更容易使用 jQuery。对我来说，jQuery 让事情变得更加一致和简洁。最后，它是 Javascript，并包装了语言。

另一个非常有用的 jQuery 示例是 AJAX。浏览器与 AJAX 请求的处理方式不一致，因此 jQuery 将其抽象化，因此您不必担心。

这可能有助于决定：

• http://www.jscripters.com/jquery-disadvantages-and-advantages/

原文由 Ian 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

按键（输入键）

在代码段内单击，然后按 Enter 键。

香草

 document.addEventListener("keypress", function(event) {
  if (event.keyCode == 13) {
    alert('hi.');
  }
});

香草简写（箭头函数，ES6）

 this.addEventListener('keypress', event => {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

查询

 $(this).on('keypress', function(event) {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery 经典

 $(this).keypress(function(event) {
  if (event.keyCode == 13) {
    alert('hi.')
  }
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jQuery 速记（箭头函数，ES6）

 $(this).keypress((e) => {
  if (e.keyCode == 13)
    alert('hi.')
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

甚至更短（ES6、ECMAScript 2021）

 $(this).keypress(e=>
  e.which==13&&alert`☺`
)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

由于一些要求，这里解释一下：

随着时间的推移，事情已经过时，我重写了这个答案，所以我更新了它。仅供参考，它与“按键”无关，而与“按键”有关。所以像“Esc”这样的非字符键不应该那样工作，但我会解释。

我使用 this 在文档准备好时关注结果内的窗口范围，为了简洁起见，但这不是必需的。

弃用：

.which 和 .keyCode 方法实际上被认为已弃用，所以我建议 .code 但我个人仍然使用 keyCode，因为性能更快. jQuery 经典版本 .keypress() 并没有像某些人所说的那样正式弃用，但它们不再像 .on('keypress') 那样受到青睐，因为它有更多的功能（实时状态、多个处理程序等） . Vanilla 版本中的 'keypress' 事件也已弃用。人们应该更喜欢 beforeinput 或 keydown keyup 今天。

表现：

越快越好。这就是为什么我更喜欢 .keyCode 即使它被认为已弃用（在大多数情况下）。不过，这完全取决于您（2020 年承诺）。

性能测试

原文由 Thielicious 发布，翻译遵循 CC BY-SA 4.0 许可协议