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

Question

我使用以下代码来跟踪关键事件，

oEvent=window.event || oEvent;
    iKeyCode=oEvent.keyCode || oEvent.which;alert(iKeyCode);

它在 Firefox 中向我发出警报，但在 IE 和 chrome 中却没有。它给了我所有其他键盘字符，但没有 esc 键和箭头键。

如何使用 javascript 检测 chrome 和 IE 中的 esc 键和箭头键？

Answer 1

您实际上并不需要 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();
};

Answer 2

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

Answer 3

问题：当您执行shift-7（与符号）时，webkit 会向按键发送键码 38（向上箭头）。

摘要： &向上均等于 38.%，向左均等于 37.'，向右均等于 39.( 向下均等于 40。对于 Firefox 和 Opera，37/38/39/40 不会发送给 &, %, ', (。他们只发送上、下、左、右的键。但是 webkit 和 ie 为箭头键和 & 发送 37/38/39/40， %, ', (。请注意，对于上/下/左/右，webkit 将 charCode 设置为 0，但对于 &, %, ', (。

解决方案： 因此，如果您处理这些事件通过键码，您需要在按下 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

Answer 4

使用 jQuery 并使用如下内容：

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

字符代码：

37：左

38：上

39：右

40：下

Answer 5

演示

尝试使用 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;
      }
    });

});

Answer 6

以下是一个简洁的表述：

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

Answer 7

这在 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