pressione a tecla de detecção Seta no IE via javascript / jQuery

StackOverflow https://stackoverflow.com/questions/2217553

Pergunta

Eu estou tentando criar um menu que pode ser navegado através das teclas de seta. Eu tenho esta trabalhando fin no Firefox.

Tentando fazê-lo funcionar no IE8 e depois de um pouco de luta, achei que era porque IE8 não iria registrar uma tecla nas setas. Para teste: 

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

No Firefox, pressionando uma das teclas de seta desencadearia um alerta de 37, 38, 39 ou 40.

No IE8, nada. Qualquer outra tecla no teclado QWERTY padrão iria registrar, mas não as teclas de seta.

Este é um problema com o meu Javascript? A configuração do navegador? Um Windows ambiente?

Foi útil?

Solução

A partir da jQuery documentação keypress (o último parágrafo do texto introdutório):

Note que keydown e keyup fornecer um código indicando qual tecla é pressionada, enquanto keypress indica qual personagem foi inserido. Por exemplo, uma letra minúscula "a" será classificado como 65 por keydown e keyup, mas como 97 por keypress. Uma letra maiúscula "A" é relatado como 97 por todos os eventos. Devido a esta distinção, quando a captura especial teclas como teclas de seta, .keydown() ou .keyup() é uma escolha melhor.

Ele ainda literalmente menciona sobre as teclas de seta;) Assim, você realmente precisa para ligar em ambos os eventos keydown ou keyup. Aqui está um SSCCE com keydown, apenas copy'n'paste'n'run-lo. Não, você não precisa fazer uma verificação de navegador compatível no event, isso funciona em todos os browsers IE6 até com o 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>

Outras dicas

Tente isto: 

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

Use o 'keydown' evento

Porque às vezes eu não quero eventos para bolha para algumas chaves, eu uso algo como: Personalize os códigos / teclas como quiser. 

/* 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);
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top