Détection de la touche fléchée dans IE via javascript/jQuery

J'essaie de configurer un menu qui peut être parcouru à l'aide des touches fléchées. J'ai cette fin de travail dans Firefox.Détection de la touche fléchée dans IE via javascript/jQuery

Essayer de le faire fonctionner dans IE8 et après un peu de lutte, a trouvé que c'était parce que IE8 ne serait pas enregistrer une touche sur les flèches. Pour tester:

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

Dans Firefox, en appuyant sur une des touches fléchées déclencherait une alerte de 37, 38, 39 ou 40.

En IE8, rien. Toute autre touche du clavier QWERTY standard serait enregistrée, mais pas les touches fléchées.

Est-ce un problème avec mon Javascript? Un paramètre de navigateur? Un paramètre Windows?

Source

2010-02-07 DA.

N'oubliez pas de tester si un utilisateur appuie également sur la touche Alt. Il est vraiment mauvais comportement lorsque vous utilisez et pour la navigation tout en empêchant le comportement par défaut pour naviguer en arrière en utilisant et . –

@Marcel Que fait la navigation alt-arrow? Je ne l'ai jamais utilisé et ne semble pas faire quoi que ce soit dans les navigateurs que j'utilise. –

Au moins dans Firefox, Chrome et IE (juste un test rapide) est le même que d'appuyer sur le bouton de retour, est comme appuyant sur le bouton avant (j'utilise très fréquemment ces raccourcis clavier). –

De l'jQuery keypress documentation (le dernier paragraphe du texte introductif):

Notez que keydown et keyup fournissent un code indiquant quelle touche est pressée, tandis que keypress indique quel caractère a été saisi. Par exemple, un "a" minuscule sera signalé comme 65 par keydown et keyup, mais comme 97 par keypress. Une majuscule "A" est signalée par 97 par tous les événements. En raison de cette distinction, lorsque vous attrapez des frappes spéciales telles que les touches fléchées, .keydown() ou .keyup() est un meilleur choix.

Il y parle même littéralement sur les touches fléchées;) Ainsi, vous avez vraiment besoin de brancher soit sur les keydown ou keyup événements. Voici un SSCCE avec keydown, il suffit de le copier et le coller. Non, vous n'avez pas besoin de faire un contrôle compatible avec le navigateur sur le event, cela fonctionne dans tous les navigateurs de 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>

Source

2010-02-08 00:04:52 BalusC

+1 pour vous donner une réponse complète. -1 pour moi pour ne pas RTFMing. ; o) –

De rien. – BalusC

Pour les futures personnes ayant ce problème, notez que vous devez utiliser l'événement 'keydown' pour' $ (document) ', pas' $ (window) '(c'est un problème que j'ai rencontré). –

Utilisez l'événement « KEYDOWN »

Source

2010-02-07 17:34:35 psychotik

Essayez ceci:

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

Source

2010-02-07 17:39:02 Skilldrick

La vérification de 'window.event' est-elle nécessaire avec jQuery? J'ai compris que cela supprimait le besoin de faire cela. –

Parce que parfois je ne veux pas les événements à bulles pour certaines touches, j'utiliser quelque chose comme: Personnaliser les codes/clés que vous voir en forme.

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

Source

2010-02-07 23:50:19

Détection de la touche fléchée dans IE via javascript/jQuery

Répondre

Questions connexes