在不在页面上放置输入元素的情况下捕获按键？

Question

如何捕获按键，例如Ctrl + Z，而不在JavaScript中在页面上放置输入元素？似乎在IE中，keypress和keyup事件只能绑定到输入元素（输入框，textareas等）

Answer 1

对于不可打印的键，例如箭头键和快捷键，如Ctrl-z，Ctrl-x，Ctrl-c，可能会在浏览器中触发某些操作（例如，在可编辑的文档或元素内），您可能不会在所有浏览器中获取按键事件。因此，如果您对抑制浏览器的默认操作感兴趣，则必须使用keydown。如果没有，keyup也可以。

将keydown事件附加到document适用于所有主流浏览器：

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.ctrlKey && evt.keyCode == 90) {
        alert("Ctrl-Z");
    }
};

如需完整参考，我强烈推荐Jan Wolter's article on JavaScript key handling。

Answer 2

jQuery也有一个非常好的实现，非常容易使用。以下是跨浏览器实现此功能的方法：

$(document).keypress(function(e){
    var checkWebkitandIE=(e.which==26 ? 1 : 0);
    var checkMoz=(e.which==122 && e.ctrlKey ? 1 : 0);

    if (checkWebkitandIE || checkMoz) $("body").append("<p>ctrl+z detected!</p>");
});

在IE7，Firefox 3.6.3＆amp; Chrome 4.1.249.1064

另一种方法是使用keydown事件并跟踪event.keyCode。但是，由于jQuery使用event.which规范化keyCode和charCode，因此他们的规范建议在各种情况下使用event.which：

$(document).keydown(function(e){
if (e.keyCode==90 && e.ctrlKey)
    $("body").append("<p>ctrl+z detected!</p>");
});

Answer 3

检测按键，包括按键组合：

window.addEventListener('keydown', function (e) {
  if (e.ctrlKey && e.keyCode == 90) {
    // Ctrl + z pressed
  }
});

这里的好处是你不 覆盖任何全局属性，而只是引入副作用。不是很好，但绝对不如其他建议那么邪恶。

Answer 4

代码＆amp;检测到ctrl + z

document.onkeyup = function(e) {
  if(e.ctrlKey && e.keyCode == 90) {
    // ctrl+z pressed
  }
}

Answer 5

对于现代JS，请使用event.key！

document.addEventListener("keypress", function onPress(event) {
    if (event.key === "z" && event.ctrlKey) {
        // Do something awesome
    }
});

Mozilla Docs

Supported Browsers

Answer 6

document.onkeydown =的keyDown;

document.onkeypress =按键;

等

在IE中为我工作