捕獲按鍵而不在頁面上放置輸入元素？

Question

如何捕獲按鍵，例如Ctrl + Z，而不需要在JavaScript中的頁面上放置輸入元素？似乎在IE中，按鍵和鍵盤事件只能綁定到輸入元素（輸入框，文本區等）

Answer 1

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測試，火狐3.6.3 &的Chrome 4.1.249.1064

做的另一種方式，這是使用keydown事件和跟蹤事件。關鍵代碼。然而，由於歸一化的jQuery鍵碼，使用event.which則charCode，其規格建議在各種情況下使用event.which：

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

Answer 2

document.onkeydown = keyDown;

document.onkeypress = keyPress;

等在IE

對我的作品

Answer 3

代碼&檢測CTRL + Z

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

Answer 4

對於非打印鍵，例如箭頭鍵和快捷鍵如Ctrl-Z ，Ctrl-x，Ctrl-c可能會在瀏覽器中觸發某些操作（例如，在可編輯的文檔或元素中），則在所有瀏覽器中可能不會發生按鍵事件。因此，如果您想要抑制瀏覽器的默認操作，則必須使用​​。如果沒有，keyup也可以。

附加一個​​事件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 5

檢測按鍵，包括組合鍵：這裏

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

的好處是，你是不是覆蓋任何全局性，而是僅僅引入副作用。不好，但絕對比這裏的其他建議少得多。

Answer 6

對於現代的JS，請使用event.key！

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

Mozilla Docs

Supported Browsers