Événements keypress dans JavaScript et JQuery?

Question

Je fais moi-même un diaporama HTML et j'ai été capable de créer la plupart des choses. L'endroit où je suis coincé est les événements du clavier. C'est une flèche vers l'avant et vers l'arrière. J'ai besoin de savoir comment les utiliser avec JavaScript ou JQuery. Ces boutons déclenchés déclencheraient un événement de manière à passer à la diapositive suivante ou à passer à la précédente. Je tiens également à mentionner que mes diapositives sont également HTML interactif, car vous pouvez remplir des données, les valider, etc en les utilisant. SO je ne veux pas que les événements du clavier à gêner pendant que l'utilisateur interagit avec le formulaire ou tout autre contenu sur la page via le clavier (par exemple remplir un formulaire, date, etc). Comment s'y prendre?

Answer 1

Il y a 3 différents événements pour la manipulation du clavier d'entrée: keyup, keydown et keypress. Tous ne sont pas déclenchés sur toutes les touches, et certains déclenchent des codes différents selon le système d'exploitation. Consultez quirksmode pour plus d'informations.

jQuery a des événements correspondants pour chacun d'eux.

De jQuery site:

Notez que KEYDOWN et keyup fournir un code indiquant quelle touche est pressée , tandis que keypress indique quel caractère a été saisi. Pour par exemple, un "a" minuscule sera signalé comme 65 par le clavier et le clavier, mais comme 97 par une pression sur une touche. Une majuscule "A" est signalée par 65 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.

Pour éviter la manipulation de ces événements lorsque l'utilisateur interagit avec la forme, vous pouvez activer le comportement de tout temps un champ de formulaire a le focus, et rallumez lorsque les champs de formulaire sont floues. De cette façon, utiliser ces flèches pour naviguer dans un champ de saisie ne provoquerait pas de traversée de diaporama.

Answer 2

$(window).keypress(function(e) { 
    var keyCode = e.keyCode || e.which; //browser compatible 
    switch (keyCode) { 
     case 39: 
      alert("right key pressed"); 
      break; 
     case 37: 
      alert("left key pressed"); 
      break; 
     default: 
      alert("other key pressed"); 
    } 
}); 

violon: http://jsfiddle.net/3wdw7/

Answer 3

je ferais quelque chose comme ceci:

$(window).keydown(function(e) { 
    if (e.target !== document.body) return; 
    switch (e.keyCode) { 
    case 39: 
     alert("right"); 
     e.preventDefault(); 
     break; 
    case 37: 
     alert("left"); 
     e.preventDefault(); 
     break; 
    } 
}); 

Vous pouvez vérifier la cible de l'événement à ne pas tenir compte des événements clés sur les éléments de l'enfant comme les champs de texte, et vous devriez éviter probablement par défaut sur l'événement pour arrêter le navigateur d'effectuer son action par défaut, comme le défilement de la page.

http://jsfiddle.net/3wdw7/2/