在没有在页面上放置输入元素的情况下捕获按键?


77

如何在不使用JavaScript在页面上放置输入元素的情况下捕获按键,例如Ctrl + Z?似乎在IE中,按键和键入事件只能绑定到输入元素(输入框,文本区域等)


5
@Tim:因为在没有GUI元素时按下这些组合键时执行动作是不常规的,因此违反了“最不惊讶的原则”。
Lightness Races in Orbit

5
@Tomalak:还有其他一些元素可能需要处理一些关键事件,例如<canvas>,尽管我同意在发出关键事件之前应该强迫任何此类元素具有焦点。使用tabindex属性将使元素在其他情况下无法获得焦点。
蒂姆·唐

2
我会推荐Keypress
xinthose

1
捕获键盘输入的另一个原因是,如果您仅在屏幕上显示条形码,并且使用条形码扫描仪作为键盘输入。我在做什么
罗伯特

大多数应用程序都有键盘快捷键,而没有输入焦点。常识。以CTRL-Z表示UNDO为例。
Epirocks

Answers:


39

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>");
});

1
不知道e。哪个可以捕获击键以及鼠标单击!而且您能告诉我如何获取密码26吗?
Powerboy 2010年

2
键码26是由keypress事件设置的“哪个”的特定ID(指示CTRL + z)。要查看keypress事件的更多字符映射,请查看jQuery文档unixpapa的关键事件测试器
Trafalmadorian 2010年

谢谢。我知道键码是什么意思。我的意思是,17代表Ctrl,90代表Z,那么您怎么得到数字26?我只是谷歌搜索,但找不到答案。
Powerboy 2010年

使用我在评论中添加的那些链接来测试不同按键的代码。
特拉法马多尼亚人2010年

1
我不认为问题与jQuery有关。完全不需要为此加载库。这就是新一代开发人员不再知道如何编码的方式。
FlorianB

67

对于不可打印的键(例如箭头键)和快捷键(例如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:我不知道为什么不应该这样做,但是我目前无法对其进行测试。
Tim Down

16

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

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

这样做的好处是您不会 覆盖任何全局属性,而只是引入了副作用。不好,但是绝对不如这里的其他建议那么邪恶。


16

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

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

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

Mozilla文件

支持的浏览器


8

编码并检测ctrl + z

document.onkeyup = function(e) {
  if(e.ctrlKey && e.keyCode == 90) {
    // ctrl+z pressed
  }
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.