Rilevamento Freccia premere il tasto in IE tramite JavaScript / jQuery

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

Domanda

Sto cercando di creare un menu che può essere navigato tramite i tasti freccia. Ho questa pinna lavorare in Firefox.

Cercando di farlo funzionare in IE8 e dopo un po 'di lotta, ha scoperto che era perché IE8 non registrare la pressione dei tasti sulle frecce. A prova: 

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

In Firefox, premendo uno dei tasti di direzione sarebbe innescare un allarme di 37, 38, 39 o 40.

In IE8, niente. Ogni altro tasto sulla tastiera QWERTY standard registrerebbe, ma non i tasti freccia.

Si tratta di un problema con il mio JavaScript? Una impostazione del browser? Un ambiente di Windows?

È stato utile?

Soluzione

jQuery documentazione keypress (l'ultimo paragrafo del testo introduttivo):

  

Si noti che keydown e keyup fornire un codice che indica quale tasto viene premuto, mentre keypress indica quale carattere immesso. Ad esempio, una "a" minuscola viene segnalata da 65 keydown e keyup, ma come 97 di keypress. Una "A" maiuscola è riportato come 97 di tutti gli eventi. A causa di questa distinzione, quando cattura le battiture speciali come i tasti freccia, .keydown() o .keyup() è una scelta migliore.

Si parla anche letteralmente sui tasti freccia;) Quindi, si ha realmente bisogno di agganciare su entrambi gli eventi keydown o keyup. Ecco un SSCCE con keydown, basta copy'n'paste'n'run esso. No, non c'è bisogno di fare un controllo compatibile con browser sul event, questo funziona in tutti i browser da IE6 fino a con 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>

Altri suggerimenti

Prova questo: 

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

Utilizzare l'evento 'keydown'

Perché a volte non voglio eventi a bolla per alcuni tasti, io uso qualcosa di simile: Personalizzare i tasti / codici, come si vede in forma. 

/* 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);
});
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top