web-dev-qa-db-fra.com

Touches fléchées jQuery Keypress

J'essaie de capturer les pressions sur les touches fléchées dans jQuery, mais aucun événement n'est déclenché.

$(function(){
    $('html').keypress(function(e){
        console.log(e);
    });
});

Cela génère des événements pour les clés alphanumériques, mais supprimer, les touches de direction, etc. ne génèrent aucun événement.

Qu'est-ce que je fais mal de ne pas capturer ceux-ci?

javascriptjquerykeypress
66
RedBassett

Voici un exemple: JSnippet DEMO keydown () vs keypress ()

Vous devez utiliser .keydown() parce que .keypress() ignorera les "flèches". Pour saisir le type de clé, utilisez e.which

Appuyez sur l'écran de résultat pour faire la mise au point (en bas à droite sur l'écran de violon), puis appuyez sur les touches fléchées pour le voir fonctionner.

Notes:

  1. .keypress() ne sera jamais déclenché avec Shift, Esc et Delete mais .keydown() le sera.
  2. En fait, .keypress() dans certains navigateurs sera déclenché par les touches fléchées, mais ce n'est pas un navigateur croisé, il est donc plus fiable d'utiliser .keydown().

Informations plus utiles

  1. Vous pouvez utiliser .which Ou .keyCode De l'objet événement. Certains navigateurs n'en prendront en charge aucun, mais lors de l'utilisation de jQuery, vous pouvez utiliser les deux en toute sécurité, car jQuery normalise les choses. (Je préfère .which Jamais eu de problème avec).
  2. Pour détecter une pression de ctrl | alt | shift | META Avec la clé capturée, vous devez vérifier les propriétés suivantes de l'objet événement. Elles seront définies sur TRUE si elles ont été enfoncées:

  3. Enfin - voici quelques codes de clé utiles (Pour une liste complète - keycode-cheatsheet ):

    • Entrez: 13
    • Jusqu'à: 38
    • Vers le bas: 40
    • Droite: 39
    • Gauche: 37
    • Esc: 27
    • Barre d'espace: 32
    • Ctrl: 17
    • Alt: 18
    • Décalage: 16
170
Shlomi Hassid
$(document).keydown(function(e) {
    console.log(e.keyCode);
});

Les événements de pression de touche détectent les touches de direction, mais pas dans tous les navigateurs. Il est donc préférable d'utiliser keydown.

Ce sont des codes clés que vous devriez avoir dans votre journal de console:

  • gauche = 37
  • up = 38
  • droite = 39
  • bas = 40
25
Harsha Venkatram

Vous pouvez vérifier si une touche fléchée est enfoncée avec:

$(document).keydown(function(e){
    if (e.keyCode > 36 && e.keyCode < 41) 
      alert( "arrowkey pressed" );          
});

jsfiddle demo

8
suhailvs

S'il vous plaît se référer le lien de JQuery

http://api.jquery.com/keypress/

Ça dit

L'événement touche est envoyé à un élément lorsque le navigateur enregistre une entrée au clavier. Cet événement est similaire à l'événement keydown, à l'exception des touches modificatrices et non imprimantes telles que les événements Maj, Echap et Suppression du déclencheur, mais pas les événements de pression. D'autres différences entre les deux événements peuvent survenir en fonction de la plate-forme et du navigateur.

Cela signifie que vous ne pouvez pas utiliser les touches du clavier en cas de flèches.

2
Tatha
left = 37,up = 38, right = 39,down = 40

$(document).keydown(function(e) {
switch(e.which) {
    case 37:
    $( "#prev" ).click();
    break;

    case 38:
    $( "#prev" ).click();
    break;

    case 39:
    $( "#next" ).click();
    break;

    case 40:
    $( "#next" ).click();
    break;

    default: return;
}
e.preventDefault();

});

1
Bhaskara Arani
$(document).on( "keydown",  keyPressed);

function keyPressed (e){
    e = e || window.e;
    var newchar = e.which || e.keyCode;
    alert(newchar)
}
0
Bharath Mb