Question

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

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

它在firefox中提供警报但在IE和Chrome中没有。它给了我所有其他的keyborad字符，但不是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（向上箭头）。

摘要：＆amp;并且两者都相等38.％并且两者都相等37.'和右两者相等39.（并且两者都等于40.对于firefox和opera，37/38/39/40不会发送给＆amp;，％， '，（。他们只发送上，下，左，右。但是webkit，即发送37/38/39/40两个箭头键和＆amp;，％，'，（注意上/下/向左/向右，webkit将charCode设置为0，但不是为＆amp;，％，'，（。

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

Demo

尝试使用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＆＃34;规范化＆＃34;考虑跨浏览器的差异：

$(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

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

7 个答案: