如何在 JavaScript 中不在页面上放置输入元素的情况下捕获按键,例如 Ctrl+Z?好像在 IE 中,keypress 和 keyup 事件只能绑定到输入元素(输入框、textareas 等)
捕获按键而不在页面上放置输入元素?
IT技术
javascript
2021-02-06 17:59:07
5个回答
对于不可打印的键(例如箭头键)和快捷键(例如 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 的关于 JavaScript 键处理的文章。
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 和 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>");
});
对于现代 JS,请使用event.key
!
document.addEventListener("keypress", function onPress(event) {
if (event.key === "z" && event.ctrlKey) {
// Do something awesome
}
});
注意:旧属性(
.keyCode
和.which
)已弃用。
检测按键按下,包括组合键:
window.addEventListener('keydown', function (e) {
if (e.ctrlKey && e.keyCode == 90) {
// Ctrl + z pressed
}
});
这里的好处是您不会 覆盖任何全局属性,而只是引入了副作用。不好,但绝对比这里的其他建议邪恶得多。
编码和检测 ctrl+z
document.onkeyup = function(e) {
if(e.ctrlKey && e.keyCode == 90) {
// ctrl+z pressed
}
}
其它你可能感兴趣的问题