Question

我正在尝试捕获jQuery中的箭头按键，但没有触发任何事件。

$(function(){
    $('html').keypress(function(e){
        console.log(e);
    });
});

这会生成字母数字键的事件，但删除，箭头键等不会产生任何事件。

如果不抓住那些我做错了什么？

Answer 1

以下是一个示例：JSnippet DEMO keydown() vs keypress()

您应该使用.keydown()，因为.keypress()会忽略“箭头”，因为捕获密钥类型使用e.which

按结果屏幕进行对焦（在小提琴屏幕右下方），然后按箭头键查看其是否有效。

备注：

.keypress()永远不会使用Shift，Esc和Delete触发，但.keydown()将会触发。

实际上某些浏览器中的.keypress()将由箭头键触发，但不是跨浏览器，因此使用.keydown()更可靠。

更有用的信息

你可以使用事件对象的.which或.keyCode - 有些浏览器不支持其中一个，但是当使用jQuery时，可以安全地使用它们，因为jQuery标准化了东西。（我更喜欢.which从未遇到过问题。）

要使用实际捕获的键检测ctrl | alt | shift | META按下，您应该检查事件对象的以下属性 - 如果按下它们，它们将设置为TRUE：

event.ctrlKey - ctrl

event.altKey - alt

event.shiftKey - shift

event.metaKey - META（Command ⌘ OR Windows Key）

最后 - 这里有一些有用的密钥代码（有关完整列表 - keycode-cheatsheet）：

输入：13

Up：38

Down：40

右：39

左：37

Esc：27

SpaceBar：32

Ctrl：17

Alt：18

Shift：16

Answer 2

$(document).keydown(function(e) {
    console.log(e.keyCode);
});

Keypress事件会检测箭头键，但不会检测所有浏览器。所以最好使用keydown。

这些是您应该在控制台日志中获得的密钥代码：

left = 37
up = 38
right = 39
down = 40

Answer 3

您可以通过以下方式检查箭头键是否按下：

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) 
      alert( "arrowkey pressed" );          
});

jsfiddle demo

Answer 4

请参阅JQuery的链接

http://api.jquery.com/keypress/

它说

当浏览器注册键盘输入时，按键事件将发送到元素。这类似于keydown事件，除了修饰符和非打印键（如Shift，Esc和delete）触发keydown事件，但不触发keypress事件。根据平台和浏览器，可能会出现两个事件之间的其他差异。

这意味着你不能在箭头的情况下使用按键。

Answer 5

left = 37,up = 38, right = 39,down = 40

$(document).keydown(function(e) {
switch(e.which) {
    case 37:
    $( "#prev" ).click();
    break;

    case 38:
    $( "#prev" ).click();
    break;

    case 39:
    $( "#next" ).click();
    break;

    case 40:
    $( "#next" ).click();
    break;

    default: return;
}
e.preventDefault();

}）;

Answer 6

$(document).on( "keydown",  keyPressed);

function keyPressed (e){
    e = e || window.e;
    var newchar = e.which || e.keyCode;
    alert(newchar)
}

jQuery Keypress箭头键

6 个答案: