jQUERY > les touches du claviers

ÉCOUTER UN ÉVÉNEMENT

Pour écouter une pression sur une touche du clavier :

 

$('#monID').keypress(maFonction);

 

ATTENTION : Il faut que l’élément #monID ait le focus. Autrement dit, que celui-ci soit sélectionné.

 

Pour écouter les événements clavier sur l’ensemble de la page :

 

$(document).keypress(maFonction);

LES ÉVÉNEMENTS CLAVIER

keydown se déclenche lorsque le visiteur enfonce une touche du clavier

 

keyup se déclenche lorsque le visiteur relâche une touche du clavier

 

keypress se déclenche lorsque le visiteur entrera un caractère. Ne fonctionne donc pas pour les touches spéciales (flèches, maj, shift, ctrl, etc.). Contrairement à keyup et keydown, keypress pourra se déclencher plusieurs fois si la touche reste appuyée (insertion de caractère). keypress différencie une majuscule d’une minuscule, contrairement aux deux autres.

CODE DE LA TOUCHE

Pour connaître le code de la touche enfoncée avec keydown (ou keyup) :

 

function quelleTouche( e ){
   console.log( e.which );
}
$(document).keydown(quelleTouche);

 

Par exemple, la touche flèche droite renvoie dans la console: 39

 

Donc, pour savoir si la touche enfoncée est bien la flèche droite :

 

function quelleTouche( e ){
   if ( e.which == 39 ){
      console.log( 'flèche droite' );
   }
}
$(document).keydown(quelleTouche);

Liste des touches / codes

Backspace: 8          Tab: 9          Entrée: 13         Shift: 16          Ctrl: 17
      Alt: 18       Pause: 19       Capslock: 20           Esc: 27       Page up: 33
Page down: 34         End: 35           Home: 36        Insert: 45        Delete: 46

flèche gauche: 37    flèche haut: 38    flèche droite: 39    flèche bas: 40

0: 48     1: 49     2: 50     3: 51     4: 52     5: 53     6: 54     7: 55     8: 56
9: 57     a: 65     b: 66     c: 67     d: 68     e: 69     f: 70     g: 71     h: 72
i: 73     j: 74     k: 75     l: 76     m: 77     n: 78     o: 79     p: 80     q: 81
r: 82     s: 83     t: 84     u: 85     v: 86     w: 87     x: 88     y: 89     z: 90

0 (pavé num): 96      1 (pavé num): 97      2 (pavé num): 98      3 (pavé num): 99
4 (pavé num): 100     5 (pavé num): 101     6 (pavé num): 102     7 (pavé num): 103
8 (pavé num): 104     9 (pavé num): 105     * (pavé num): 106     + (pavé num): 107
- (pavé num): 109     . (pavé num): 110     / (pavé num): 111 

F1: 112       F2: 113        F3: 114        F4: 115        F5: 116        F6: 117
F7: 118       F8: 119        F9: 120       F10: 121       F11: 122       F12: 123

=: 187        ,: 188         /: 191         \: 220

Code du caractère

Pour connaitre le code du caractère entré avec keypress : String.fromCharCode()

 

function quelCode(e){
   var code = String.fromCharCode(e.which);
   console.log(code);
}
$(document).keypress(quelCode);

 

Ce code fera la distinction entre majuscule et minuscule et déclenchera l’événement à chaque insertion de caractère si la touche du caractère reste pressée.

détection du CTRL+S

code du CTRL : 17

code du S : 83

 

var isCtrl = false;
$(document).keyup(function (e) {
   if(e.which == 17) isCtrl=false;
}).keydown(function (e) {
   if(e.which == 17) isCtrl=true;
   if(e.which == 83 && isCtrl == true) {
        // CTRL+S
      return false;
   }
});