如何在Chrome和IE中跟踪箭头键

您并不真正需要JQuery，尽管它确实缩短了代码。

您将不得不使用keyDown事件，keyPress将无法在旧版本的IE中使用箭头键。

这里有一个完整的教程，您可以使用，请参阅靠近页面底部的箭头键示例：http://www.cryer.co.uk/resources/javascript/script20_respond_to_keypress.htm

以下是我使用的一些代码，由于我必须处理带有缓冲的重复按键，因此有点简化：

document.onkeydown = function(event) {
     if (!event)
          event = window.event;
     var code = event.keyCode;
     if (event.charCode && code == 0)
          code = event.charCode;
     switch(code) {
          case 37:
              // Key left.
              break;
          case 38:
              // Key up.
              break;
          case 39:
              // Key right.
              break;
          case 40:
              // Key down.
              break;
     }
     event.preventDefault();
};

我刚刚遇到了同样的问题。Chrome处理keypress和keydown/keyup事件至少有一个区别。对于箭头键，Chrome中的keypress事件不会触发，而对于keydown和keyup，则会触发。

问题：webkit在执行移位-7（安培数）时向按键发送一个键代码38（向上箭头）。

摘要：&上升幅度均为38.%并且使两者相等37’右二者相等39。（下两个等于40。对于firefox和opera，37/38/39/40没有发送&，%，'，（.他们只发送向上、向下、向左、向右的。但webkit和ie发送37/38/39/40用于箭头键和&，%，'，（.注意，对于向上/向下/向左/向右，webkit将charCode设置为0，但不用于&、%，'。

解决方案：因此，如果您通过keycode处理这些事件，则需要在shift键关闭时忽略，或者检查charCode是否为0

• 最佳资源：http://unixpapa.com/js/key.html
• 测试浏览器：http://asquare.net/javascript/tests/KeyCode.html
• bugs.jquery.com/ticket/7300。"这样做是为了匹配IE。按键事件只应该为插入字符的键触发。请注意，keydown/keyup确实会为箭头键触发。"
• 有趣的项目：github.com/OscarGodson/jKey

使用jQuery并使用类似的东西：

$(document).keydown(function(e){
    if (e.keyCode == 37) { 
        alert( "left pressed" );
        return false;
    }
});

字符代码：

37:左

38:向上

39:右侧

40：下降

演示

尝试使用jquery库来完成您需要的操作，然后调用下面的。在演示中，您可以单击输入框，然后开始键入。它会用钥匙代码提醒您。您可以将该事件侦听器绑定到页面的任何元素。它不一定只是一个输入。

$(document).ready(function() { 
    KEY_CODES = {
      37: 'left',
      38: 'up',
      39: 'right',
      40: 'down'
    }
    KEY_STATUS = { keyDown:false };
    for (code in KEY_CODES) {
      KEY_STATUS[KEY_CODES[code]] = false;
    }
    $(window).keydown(function (e) {
      KEY_STATUS.keyDown = true;
      // perform functionality for keydown
      if (KEY_CODES[e.keyCode]) {
          e.preventDefault();
          alert('arrow');
          if(e.keyCode == 40)
          {
              // Arrow Down 
          }
          else if(e.keyCode == 39)
          {
              // Arrow Right    
          }
          else if(e.keyCode == 38)
          {
              // Arrow Up    
          }
          else if(e.keyCode == 37)
          {
              // Arrow Left    
          }
      }
    }).keyup(function (e) {
      KEY_STATUS.keyDown = false;
      if (KEY_CODES[e.keyCode]) {          
        e.preventDefault();
        KEY_STATUS[KEY_CODES[e.keyCode]] = false;
      }
    });
});

这里有一个简洁的公式：

document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
            alert('left');
            break;
        case 38:
            alert('up');
            break;
        case 39:
            alert('right');
            break;
        case 40:
            alert('down');
            break;
    }
};

然而，如果你使用JQuery，你最好使用e.which，JQuery将其"标准化"以解决跨浏览器的差异：

$(document).keydown(function(e) {
    switch(e.which) {
        // the rest is the same

这在Opera20和IE8中对我有效。（我没有Chrome可供测试。）

var keyPressListenerFn = function(event) {
    if (!event){ event = window.event }
    var code = event.charCode && event.keyCode == 0 ? event.charCode : event.keyCode
    switch(code) {
        case 37: prev(); break // left
        case 39: next(); break // right
    }
    if (event.preventDefault){ event.preventDefault() } // opera20
    if (event.returnValue){ event.returnValue = false } // ie8
}
var addEvent = document.attachEvent ? document.attachEvent : document.addEventListener
addEvent('keydown', keyPressListenerFn)   // opera20
addEvent('onkeydown', keyPressListenerFn) // ie8