2010-02-07 18 views
15

Próbuję ustawić menu, które można nawigować za pomocą klawiszy strzałek. Mam tę działającą płetwę w Firefoksie.Wykrywanie klawiszy strzałek w IE za pomocą javascript/jQuery

Próbując uruchomić go w IE8 i po odrobinie walki, okazało się, że to dlatego, że IE8 nie zarejestruje naciśnięcia klawiszy na strzałkach. Do testu:

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

W Firefoksie, naciśnięcie jednego z klawiszy strzałek by wywołać alarm o 37, 38, 39 lub 40.

w IE8, nic. Każdy inny klawisz na standardowej klawiaturze QWERTY miałby się zarejestrować, ale nie klawisze strzałek.

Czy to jest problem z moją wersją Javascript? Ustawienia przeglądarki? Ustawienie Windows?

+1

Nie zapomnij sprawdzić, czy użytkownik naciśnie klawisz Alt. To naprawdę złe zachowanie, gdy korzystasz z nawigacji i , uniemożliwiając domyślne zachowanie podczas przeglądania w przód iw tył przy użyciu i . –

+0

@Marcel Do czego służy nawigacja alt-strzałkowa? Nigdy go nie używałem ani nie wydaje mi się, że nic nie robię w przeglądarkach, których używam. –

+0

Przynajmniej w Firefoksie, Chrome i IE (tylko szybki test) jest taki sam jak naciśnięcie przycisku Wstecz, jest jak naciśnięcie przycisku przewijania do przodu (bardzo często używam tych skrótów klawiszowych). –

Odpowiedz

38

Z jQuery keypress documentation (ostatni akapit tekstu wprowadzającego):

Zauważ, że keydown i keyup dostarczyć kod wskazujący, który klawisz jest wciśnięty, podczas keypress wskazuje, który znak został wprowadzony. Na przykład małe "a" będzie zgłaszane jako 65 przez keydown i keyup, ale jako 97 przez keypress. Wielkie litery "A" są zgłaszane jako 97 we wszystkich zdarzeniach. Z uwagi na to rozróżnienie, przy chwytaniu specjalnych klawiszy, takich jak klawisze strzałek, lepszym wyborem jest .keydown() lub .keyup().

nawet wzmianki o dosłownie klawiszy strzałek;) Tak więc, naprawdę trzeba się podłączyć z obu wydarzeń keydown lub keyup. Oto SSCCE z keydown, wystarczy skopiować i wkleić go. Nie, nie musisz wykonywać sprawdzania kompatybilnego z przeglądarką na event, działa to we wszystkich przeglądarkach od IE6 do Firefoksa.

<!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> 
+1

+1 za udzielenie dokładnej odpowiedzi. -1 dla mnie za nie RTFMing. ; o) –

+0

Nie ma za co. – BalusC

+0

Dla przyszłych ludzi mających ten problem, zwróć uwagę, że powinieneś użyć zdarzenia 'keydown' dla' $ (document) ', a nie' $ (window) '(to był problem, który napotkałem). –

7

Spróbuj tego:

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

Czy konieczne jest sprawdzenie 'window.event' w jQuery? Zrozumiałem, że to usunęło potrzebę. –

1

Bo czasami nie chcą zdarzenia do bańki dla niektórych klawiszy, używam coś takiego: Dostosuj kodów/klawisze jak ty uważać za stosowne.

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