Javascript 捕获按键而不在页面上放置输入元素?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2878983/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Capture key press without placing an input element on the page?
提问by powerboy
How to capture key press, e.g., Ctrl+Z, without placing an input element on the page in JavaScript? Seems that in IE, keypress and keyup events can only be bound to input elements (input boxes, textareas, etc)
如何在 JavaScript 中不在页面上放置输入元素的情况下捕获按键,例如 Ctrl+Z?好像在 IE 中,keypress 和 keyup 事件只能绑定到输入元素(输入框、textareas 等)
采纳答案by Trafalmadorian
jQuery also has an excellent implementation that's incredibly easy to use. Here's how you could implement this functionality across browsers:
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>");
});
Tested in IE7,Firefox 3.6.3 & Chrome 4.1.249.1064
在 IE7、Firefox 3.6.3 和 Chrome 4.1.249.1064 中测试
Another way of doing this is to use the keydown event and track the event.keyCode. However, since jQuery normalizes keyCode and charCode using event.which, their spec recommends using event.which in a variety of situations:
另一种方法是使用 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>");
});
回答by Tim Down
For non-printable keys such as arrow keys and shortcut keys such as Ctrl-z, Ctrl-x, Ctrl-c that may trigger some action in the browser (for instance, inside editable documents or elements), you may not get a keypress event in all browsers. For this reason you have to use keydowninstead, if you're interested in suppressing the browser's default action. If not, keyupwill do just as well.
对于不可打印的键(例如箭头键)和快捷键(例如 Ctrl-z、Ctrl-x、Ctrl-c)可能会触发浏览器中的某些操作(例如,在可编辑的文档或元素中),您可能无法获得按键所有浏览器中的事件。出于这个原因keydown,如果您有兴趣抑制浏览器的默认操作,则必须改用它。如果没有,keyup也一样。
Attaching a keydownevent to documentworks in all the major browsers:
将keydown事件附加到document适用于所有主要浏览器:
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.ctrlKey && evt.keyCode == 90) {
alert("Ctrl-Z");
}
};
For a complete reference, I strongly recommend Jan Wolter's article on JavaScript key handling.
对于完整的参考,我强烈推荐Jan Wolter 的关于 JavaScript 键处理的文章。
回答by Sal
Detect key press, including key combinations:
检测按键,包括组合键:
window.addEventListener('keydown', function (e) {
if (e.ctrlKey && e.keyCode == 90) {
// Ctrl + z pressed
}
});
Benefit here is that you are notoverwritingany global properties, but instead merely introducing a side effect. Not good, but definitely a whole lot less nefarious than other suggestions on here.
这里的好处是您不会覆盖任何全局属性,而只是引入了副作用。不好,但绝对比这里的其他建议邪恶得多。
回答by Gibolt
For modern JS, use event.key!
对于现代 JS,请使用event.key!
document.addEventListener("keypress", function onPress(event) {
if (event.key === "z" && event.ctrlKey) {
// Do something awesome
}
});
回答by Ben Rowe
Code & detects ctrl+z
编码和检测 ctrl+z
document.onkeyup = function(e) {
if(e.ctrlKey && e.keyCode == 90) {
// ctrl+z pressed
}
}

