Médiaforma

jQuery – Gestion du clavier

Print Friendly

Les événements liés au clavier sont très limités. Ils sont résumés dans le tableau suivant :

Méthode Événement géré
keydown() Appui sur une touche du clavier
keyup() Relâchement d’une touche du clavier préalablement enfoncée
keypress() Maintien d’une touche du clavier enfoncée

 

A titre d’exemple, nous allons afficher le keycode ou le charcode de la touche frappée au clavier. Saisissez le code suivant dans NotePad++ et sauvegardez-le sous le nom clavier.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Capture des touches</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les touches du clavier
    <input type="text" id="target" autofocus><br/>
    <span id="compte-rendu"></span>
    <script>
      $(function() {
        $("#target").keypress(function(e) {
        if (e.which == 9) e.preventDefault();
        $('#compte-rendu').html('Code de la touche : ' + e.which);
        });
      });
    </script>
  </body>
</html>

La ligne suivante empêche la propagation de la touche Tab et donc la sortie du champ texte :

if (e.which == 9) e.preventDefault();

 

Voici la liste des codes ASCII retournés par e.which lorsque la fonction keypress() est utilisée :

Caractère ASCII Caractère ASCII Caractère ASCII Caractère ASCII Caractère ASCII
Espace 32 3 51 F 70 Y 89 l 108
! 33 4 52 G 71 Z 90 m 109
«  34 5 53 H 72 [ 91 n 110
# 35 6 54 I 73 \ 92 o 111
$ 36 7 55 J 74 ] 93 p 112
% 37 8 56 K 75 ^ 94 q 113
& 38 9 57 L 76 _ 95 r 114
39 : 58 M 77 ` 96 s 115
( 40 ; 59 N 78 a 97 t 116
) 41 < 60 O 79 b 98 u 117
* 42 = 61 P 80 c 99 v 118
+ 43 > 62 Q 81 d 100 w 119
, 44 ? 63 R 82 e 101 x 120
45 @ 64 S 83 f 102 y 121
. 46 A 65 T 84 g 103 z 122
/ 47 B 66 U 85 h 104 { 123
0 48 C 67 V 86 i 105 | 124
1 49 D 68 W 87 j 106 } 125
2 50 E 69 X 88 k 107 ~ 126

 

Exercice

Créez un document qui comporte une zone de texte. Capturez l’événement keypress sur cette zone de texte, transformez les touches frappées en majuscules et affichez-les dans la zone de texte.

A titre d’information, pour convertir le code de la touche frappée en un caractère majuscule, vous utiliserez l’expression suivante :

String.fromCharCode(e.keyCode).toUpperCase;

 

Solution

Voici une des solutions possibles (clavier2.htm) :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Capture des touches et transformation en majuscules</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les touches du clavier
    <input type="text" id="target" autofocus><br/>
    <script>
      $(function() {
        $("#target").keypress(function(e) {
          var contenu = $('#target').val();
          var frappe = String.fromCharCode(e.keyCode);
          if(e.which>=97 && e.which<=122){
            e.preventDefault(); // Empêche la propagation des touches frappées
            contenu+=frappe;
          }
          $('#target').val(contenu);
        });
      });
    </script>
  </body>
</html>

 

Lorsque l’événement keydown est levé, le contenu de la zone de texte est stocké dans la variable contenu :

var contenu = $('#target').val();

La touche frappée est mémorisée dans la variable frappe :

var frappe = String.fromCharCode(e.keyCode);

S’il s’agit d’une lettre (entre A et Z dont entre le keyCode 65 et 90), la frappe n’est pas propagée :

if(e.which>=65 && e.which<=90){
  e.preventDefault(); // Empêche la propagation des touches frappées

Et le contenu est mis à jour avec la version majuscule de la touche frappée :

contenu+=frappe;

Il ne reste plus qu’à mettre à jour le contenu de la zone de texte :

$('#target').val(contenu);

 

Remarque

Si vous utilisez la fonction keypress(), e.which retourne le code de la touche frappée, en faisant la distinction entre les minuscules et les majuscules. Par contre, si vous utilisez la fonction keydown() ou keyup(), e.which retourne une version simplifiée de la touche frappée, sans faire la distinction entre les minuscules et les majuscules.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply