Обнаружение нажатия клавиши со стрелкой в ​​IE с помощью javascript / jQuery - PullRequest
Новая
       19

Обнаружение нажатия клавиши со стрелкой в ​​IE с помощью javascript / jQuery

15 голосов
/ 07 февраля 2010

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

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

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

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

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

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

Ответы [ 4 ]

38 голосов
/ 08 февраля 2010

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

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

В нем даже буквально упоминается о клавишах со стрелками;) Таким образом, вам действительно нужно подключить либо события keydown, либо keyup. Вот SSCCE с keydown, просто скопируйте и запустите его. Нет, вам не нужно выполнять проверку совместимости браузера на 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>
7 голосов
/ 07 февраля 2010

Попробуйте это: 

$(document).keydown(function (e) {
    if(!e) {
        e = window.event;
    }
    switch(e.keyCode) {
    case 37:
        goLeft();
        break;
    case 39:
        goRight();
        break;
    }
});
2 голосов
/ 07 февраля 2010

Использовать событие 'keydown'

1 голос
/ 08 февраля 2010

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

/* 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);
});
...