如何在 Javascript 函数中处理箭头键和 <（大于）？哪个事件和哪个代码（charCode Vs keyCode）？答案

【问题标题】：How can I handle ArrowKeys and < (Greater Than) in a Javascript function? Which event and which code (charCode Or keyCode)?如何在 Javascript 函数中处理箭头键和 <（大于）？哪个事件和哪个代码（charCode Vs keyCode）？
【发布时间】：2010-07-05 19:02:26
【问题描述】：

如何在 Javascript 函数中处理 ArrowKeys 和 <（大于）？哪个事件和哪个代码（charCode 或 keyCode）？

我很困惑如何做到这一点。我已经非常仔细地阅读了这个链接， Events and keyCode+charCode，但我找不到适合我的方案的任何解决方案。

【问题讨论】：

标签： javascript events keycode arrow-keys

【解决方案1】：

使用event.keyCode 就足够了。您只需将浏览器兼容性问题考虑到获取关键事件即可。

这是一个捕获箭头键的基本启动示例，复制'n'粘贴'n'运行它：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3181648</title>
        <script>
            document.onkeydown = function(e) {
                e = e || event; // "real browsers" || IE6/7.
                switch (e.keyCode) {
                    case 37: alert('left'); break;
                    case 38: alert('up'); break;
                    case 39: alert('right'); break;
                    case 40: alert('down'); break;
                }
            }
        </script>
    </head>
    <body>
       <p>Press one of the arrow keys.</p> 
    </body>
</html>

请注意，附加事件最好使用this 方式或使用jQuery。

要捕获< 等按下的字符，请查看Tim's answer。

【讨论】：

非常感谢/我检查了你的链接，我会尽快跳转到 jquery//
没有。对于箭头键，keydown 事件和keyCode 事件属性是正确的。对于检测键入的字符，使用keypress 事件是唯一安全的方法。它适用于所有键盘和浏览器，与使用 keydown 不同。
@LostLord：@Tim 是对的，以上仅适用于< 位于逗号, 位置的键盘。有关处理字符的正确实现，请参阅他的答案。我从代码示例中删除了< 处理以避免红鲱鱼。接受蒂姆的回答。

【解决方案2】：

当检测到诸如箭头键之类的非文本输入键时，使用keydown 事件是正确的方法。要检测诸如< 之类的键入字符，使用keypress 事件是唯一安全的方法。如果您改为使用keydown 事件及其keyCode 属性，则不能保证它适用于与您自己不同的键盘和浏览器类型。

如果你真的想了解 JavaScript 密钥处理，我推荐以下页面：http://unixpapa.com/js/key.html

这是您的要求的示例：

document.onkeydown = function(evt) {
    evt = evt || window.event;
    switch (evt.keyCode) {
        case 37: alert("left"); break;
        case 38: alert("up"); break;
        case 39: alert("right"); break;
        case 40: alert("down"); break;
    }
};

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var charCode = evt.which || evt.keyCode;
    var charStr = String.fromCharCode(charCode);
    if (charStr == "<") {
        alert("<");
    }
};

【讨论】：

【解决方案3】：

<script type="text/javascript">
var Keys = {
      BACKSPACE: 8,  TAB: 9,        ENTER: 13,     SHIFT: 16,
      CTRL: 17,      ALT: 18,       PAUSE: 19,     CAPS: 20,
      ESC: 27,       PAGEUP: 33,    PAGEDN: 34,    END: 35,
      HOME: 36,      LEFT: 37,      UP: 38,        RIGHT: 39,
      DOWN: 40,      INSERT: 45,    DELETE: 46,       
      n0: 48, n1: 49, n2: 50, n3: 51, n4: 52,
      n5: 53, n6: 54, n7: 55, n8: 56, n9: 57,
      A:65, B:66, C:67, D:68, E:68, F:70, G:71, H:72, I:73, J:74, K:75,
      L:76, M:77, N:78, O:79, P:80, Q:81, R:82, S:83, T:84, U:85, V:86,
      W:87, X:88, Y:89, Z:90,
      WINLEFT: 91,   WINRIGHT: 92,  SELECT: 93,    NUM0: 96,
      NUM1: 97,      NUM2: 98,      NUM3: 99,      NUM4: 100,
      NUM5: 101,     NUM6: 102,     NUM7: 103,     NUM8: 104,
      NUM9: 105,     MULTIPLY: 106, ADD: 107,      SUBTRACT: 109,
      DECIMAL: 110,  DIVIDE: 111,   F1: 112,       F2: 113,
      F3: 114,       F4: 115,       F5: 116,       F6: 117,
      F7: 118,       F8: 119,       F9: 120,       F10: 121,
      F11: 122,      F12: 123,      NUMLOCK: 144,  SCROLLLOCK: 145,
      SEMICOLON: 186,EQUAL: 187,    COMMA: 188,    DASH: 189,
      PERIOD: 190,   FORWARDSLASH: 191,            GRAVEACCENT: 192,
      OPENBRACKET: 219,             BACKSLASH: 220,
      CLOSEBRACKET: 221,            QUOTE: 222
};

/* true - will be handled also by default handler and for false - will not (if you wanna disable some keys) */
function pressedKeyHandler(key){
     if (k != Keys.COMMA || k != Keys.DASH) return true;
     //handle pressed button here         
     return true; 
}

if (typeof window.event != 'undefined') // IE
  document.onkeydown = function() { return pressedKeyHandler(event.keyCode); }
else   // FireFox/Opera/Others 
  document.onkeypress = function(e) { return pressedKeyHandler(e.keyCode); }

</script>

我可能错了，但对于 IE 来说，处理 onkeydown 事件而不是 onkeypress 似乎更好。

【讨论】：