捕获按键而不在页面上放置输入元素?

IT技术 javascript
2021-02-06 17:59:07

如何在 JavaScript 中不在页面上放置输入元素的情况下捕获按键,例如 Ctrl+Z?好像在 IE 中,keypress 和 keyup 事件只能绑定到输入元素(输入框、textareas 等)

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 键处理的文章

@hendrik:我不明白为什么不应该这样做,但我目前无法对其进行测试。
2021-03-19 17:59:07

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>");
});
你不会在所有浏览器中都得到 26。事实上,在 WebKit 中你只能得到 26。不在 IE、Firefox 或 IE 中。
2021-03-16 17:59:07
不知道 e.which 可以捕获击键以及鼠标单击!你能告诉我如何获得密钥代码 26 吗?
2021-03-22 17:59:07
键码 26 是由按键事件设置的“which”的特定 ID(表示 CTRL+z)。要查看按键事件的更多字符映射,请查看jQuery 文档unixpapa 的按键事件测试器
2021-03-24 17:59:07
使用我在评论中添加的链接来测试不同击键的代码。
2021-03-30 17:59:07
谢谢。我知道键码的含义是什么。我的意思是,17 代表 Ctrl,90 代表 Z,那么你是怎么得到数字 26 的?我只是用谷歌搜索但找不到答案。
2021-04-09 17:59:07

对于现代 JS,请使用event.key!

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

注意:旧属性(.keyCode.which)已弃用。

Mozilla 文档

支持的浏览器

可能值得补充一下为什么现在应该更改所有旧代码,“现代 JS”方法有什么优势,尤其是当“旧”/传统/标准方法具有更广泛的浏览器支持时。
2021-03-29 17:59:07

检测按键按下,包括组合键:

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
  }
}