Обнаружение нажатия клавиши со стрелкой в IE через javascript/jQuery

Я пытаюсь настроить меню, которое можно перемещать с помощью клавиш со стрелками. У меня этот рабочий плагин в Firefox.

Попытка заставить его работать в IE8 и после некоторой битвы обнаружила, что это потому, что IE8 не зарегистрировал нажатие клавиш на стрелках. Чтобы проверить:

$(document).keypress(function (eh){ 
    alert(eh.keyCode);
};

В Firefox нажатие любой из клавиш со стрелками вызовет оповещение о 37, 38, 39 или 40.

В IE8 ничего. Любой другой ключ на стандартной QWERTY-клавиатуре будет зарегистрирован, но не клавиши со стрелками.

Это проблема с моим Javascript? Настройка браузера? Настройка Windows?

Ответ 1

Из jQuery keypress документации (последний абзац вводного текста):

Обратите внимание, что keydown и keyup предоставляют код, указывающий, какая клавиша нажата, а keypress указывает, какой символ был введен. Например, нижний регистр "a" будет отображаться как 65 на keydown и keyup, а как 97 на keypress. В верхнем регистре "А" сообщается как 97 по всем событиям. Из-за этого различия при выборе особых нажатий клавиш, таких как клавиши со стрелками, .keydown() или .keyup() - лучший выбор.

Он даже буквально упоминает о клавишах со стрелками;) Таким образом, вам действительно нужно подключаться к событиям keydown или keyup. Здесь SSCCE с keydown, просто скопируйте'paste'n'run. Нет, вам не нужно выполнять проверку совместимости с браузером на event, это работает во всех браузерах от IE6 до Firefox.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2217553</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
            $(document).keydown(function(event) {
                switch (event.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>

Ответ 2

Попробуйте следующее:

$(document).keydown(function (e) {
    if(!e) {
        e = window.event;
    }
    switch(e.keyCode) {
    case 37:
        goLeft();
        break;
    case 39:
        goRight();
        break;
    }
});

Ответ 3

Используйте событие "keydown"

Ответ 4

Поскольку я иногда не хочу, чтобы события вызывали пузырьки для некоторых клавиш, я использую что-то вроде: Настройте коды/клавиши по своему усмотрению.

/* handle special key press */
function checkCptKey(e)
{
    var shouldBubble = true;
    switch (e.keyCode)
    {
        // user pressed the Tab                                                                                                                                        
        case 9:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                shouldBubble = false;
                break;
            };
            // user pressed the Enter    
        case 13:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                break;
            };
            // user pressed the ESC
        case 27:
            {
                $(".someSelect").toggleClass("classSelectVisible");
                break;
            };
    };
    /* this propogates the jQuery event if true */
    return shouldBubble;
};

/* user pressed special keys while in Selector */
$(".mySelect").keydown(function(e)
{
    return checkCptKey(e);
});