jQuery Keypress箭头键

Question

我试图在jQuery中捕获箭头按键,但没有触发任何事件.

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

这会为字母数字键生成事件,但删除,箭头键等不会生成任何事件.

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

Answer 1

这是一个例子:JSnippet DEMO keydown()vs keypress()

你应该使用.keydown()因为.keypress()将忽略"箭头",用于捕获密钥类型使用e.which

按结果屏幕进行对焦(在小提琴屏幕右下方),然后按箭头键查看其是否正常工作.

笔记:

1. .keypress()将永远不会使用Shift,Esc和Delete触发,但.keydown()会.
2. 实际上.keypress()在某些浏览器中会被箭头键触发,但它不是跨浏览器,因此使用起来更可靠.keydown().

更有用的信息

3. 您可以使用事件对象的.whichOr .keyCode- 有些浏览器不支持其中一个,但是当使用jQuery时,可以安全地使用它们,因为jQuery标准化了东西.(我更喜欢.which从未遇到过问题).
4. 要ctrl | alt | shift | META使用实际捕获的键检测印刷机,您应该检查事件对象的以下属性 - 如果按下它们,它们将被设置为TRUE:
   • event.ctrlKey - ctrl
   • event.altKey - alt
   • event.shiftKey - 转移
   • event.metaKey - META(命令⌘或Windows键)

5. 最后 - 这里有一些有用的密钥代码(完整列表 - keycode-cheatsheet):

   • 输入:13
   • 上:38
   • 下来:40
   • 右:39
   • 左:37
   • Esc:27
   • SpaceBar:32
   • Ctrl:17
   • 替补:18
   • 轮班:16

Answer 2

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

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

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

• 左= 37
• up = 38
• 对= 39
• 下来= 40

Answer 3

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

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

jsfiddle演示

Answer 4

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();

});