devstory

Le Tutoriel de Javascript KeyboardEvent

Site d'apprentissage des langues gratuit:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles. Facebook

1- KeyboardEvent

KeyboardEvent est une interface représentant les événements qui se produisent lorsque les utilisateurs interagissent avec un clavier, y compris des événements keydown, keypress, keyup.
KeyboardEvent est la sous interface de UIEvent.
Order Event
1 onkeydown
2 onkeypress
3 onkeyup
keydown
L'événement keydown se produit lorsque vous appuyez (press down) sur une touche (key). Dans le système d'exploitation Windows, si vous continuez d'appuyer sur la touche, celle-ci émettra constamment des événements keypress .. keydown. Mais sous MacOS, si vous continuez d'appuyer sur la touche, elle émettra constamment des événements keydown. Comme l'illustration suivante :
keypress
Il y a 2 cas de survenue de keypress, auquel le premier cas est expliqué ci-dessus (Voir l'événement keydown). Le deuxième cas est que vous appuyez sur une touche et la relâchez (release) rapidement et à ce moment il y aura 2 événements keypress, keyup émettent dans l'ordre.
keyup
L'événement keyup se produit lorsque vous relâchez (release) une touche.
Remarque : L'événement keypress ne sera pas émis pour les touches telles que ALT, SHIFT, CTRL, META-KEY, ESC. Si vous voulez détecter (detect) si ces touches sont appuyées, vous pouvez utiliser les propriétés (property) telles que altKey, shiftKey, ctrlKey, metaKey de l'objet event.
keyevents-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>KeyEvent Example</title>

      <script src="keyevents-example.js"></script>

   </head>
   <body>

      <h3>KeyEvent example</h3>

      <input type="text"
            onkeydown="keydownHandler(event)"
            onkeyup="keyupHandler(event)"
            onkeypress="keypressHandler(event)"/>
      <br/><br/>

      <textarea id="log-div" rows = "10" disabled>

      </textarea>
      <br/>
      <button onclick="clearLog()">Clear</button>

   </body>
</html>

 
keyevents-example.js


function keydownHandler(evt)  {
    appendLog("Keydown!");
}

function keyupHandler(evt)  {
    appendLog("Keyup!");
}

function keypressHandler(evt)  {
    appendLog("Keypress!");
}


function appendLog(text)  {
    var oldText = document.getElementById("log-div").value;
    document.getElementById("log-div").value = oldText+"\n"+ text;
}

function clearLog()  {
    document.getElementById("log-div").value = "";
}

 

2- Properties & Methods

KeyEvent est la sous interface de UIEvent donc elle hérite les propriétés (property) et les méthodes de cette interface.
PropriétéDescription
altKeyRenvoie true si la touche "ALT" est pressée lorsqu'un événement de touche se produit.
ctrlKeyRenvoie true si la touche "CTRL" est pressée lorsqu'un événement de touche se produit.
shiftKeyRenvoie true si la touche "SHIFT" est pressée lorsqu'un événement de touche se produit.
metaKeyRenvoie true si la touche "META" est pressée lorsqu'un événement de touche se produit.
Exemple : Appuyez sur la touche 'SHIFT' et maintenez-la inchangée, puis appuyez sur n'importe quelle touche. 
prop-shiftKey-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>KeyEvent Example</title>

      <script src="prop-shiftKey-example.js"></script>

   </head>
   <body>

      <h3>Hold key 'SHIFT' and press any key!</h3>

      <input type="text"
            onkeydown="keydownHandler(event)"/>
      <br/><br/>

      <div id="log-div" style="color:red;"></div>

   </body>
</html>

 
prop-shiftKey-example.js


function keydownHandler(evt)  {

   if(evt.shiftKey) {
      document.getElementById("log-div").innerHTML ="evt.shiftKey = true";
   } else {
      document.getElementById("log-div").innerHTML ="evt.shiftKey = false";
   }

}
 
PropriétéDescription
keyCodeRenvoie le code de caractère Unicode de la touche qui a déclenché l'événement keypress ou le code de touche Unicode de la touche qui a déclenché l'événement.
keyRenvoie le nom des touche. Par exemple (enter, shift, 0, 1, a, b,....)


charCodeRenvoie le code de caractère Unicode de la touche qui a déclenché l'événement keypress. Remarque : charCode = 0 dans l'événement keydown, keyup.
codeRenvoie le nom des touche. Par exemple (Enter, Shift, Digit0, Digit1, KeyA, KeyB,...)

whichRenvoie charCode dans l'événement keypress, ou keyCode dans l'événement keydown, keyup.
keyCode, key:
Chaque touche (key) sur le clavier porte un numéro, appelé keyCode. Par exemple, la touche 'a' a keyCode = 65. Il n'y a pas de concept de majuscules et de minuscules pour les touches. Donc keyCode de 'a' ou 'A' est 65.
keyCode
key
(name of key)
...
9 tab
12 clear
13 enter
...
48 0
49 1
50 2
51 3
....
65 a
66 b
67 c
.....
** Vous pouvez consulter les détails du tableau Key & KeyCode dans l'annexe à la fin de cet article.
prop-key-keyCode-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>KeyEvent Example</title>

      <script>
          function keydownHandler(evt) {
            var logDiv = document.getElementById("log-div");

            logDiv.innerHTML = "event.key= " + evt.key +"<br/>"
                             + "event.keyCode= "+ evt.keyCode;
          }
      </script>

   </head>
   <body>

      <h3>event.key, event.keyCode</h3>

      <input type="text" onkeydown="keydownHandler(event)"/>
      <br/><br/>

      <div id="log-div" style="color:red;"></div>
   </body>
</html>

 
code, charCode
keyCode
key
(Name of key)
code
(Name of key)
.....
16 shift ShiftLeft
.....
48 0 Digit0
49 1 Digit1
50 2 Digit2
51 3 Digit3
....
65 a KeyA
66 b KeyB
67 c KeyC
68 d KeyD
69 e KeyE
.....
charCode est uniquement  assigné une valeur dans l'événement keypress, il a toujours la valeur 0 dans l'événement keydown & keyup. charCode est un nombre qui représente un caractère Unicode appuyé par un utilisateur. 
prop-code-charCode-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>KeyEvent Example</title>

      <script>
          function keypressHandler(evt) {
            var logDiv = document.getElementById("log-div");

            logDiv.innerHTML = "event.code= " + evt.code +"<br/>"
                             + "event.charCode= "+ evt.charCode;
          }
      </script>

   </head>
   <body>

      <h3>event.code, event.charCode</h3>

      <input type="text" onkeypress="keypressHandler(event)"/>
      <br/><br/>

      <div id="log-div" style="color:red;"></div>

   </body>
</html>

 
keyCode vs charCode
key
keyCode
(keydown/keyup)
keyCode
(keypress)
charCode
(keypress)
.....
a/A 65 / 65 97 / 65 97 / 65
b/B 66 / 66 98 / 66 98 / 66
c/C 67 / 67 99 / 67 99 / 67
d/D 68 / 68 100 / 68 100 / 68
e/E 69 / 69 101 / 69 101 / 69
.....
PropriétéDescription
isComposingRenvoie true si l'état de l'événement est composing (en cours de composition). Si non, renvoie false.
locationRetourne l'emplacement d'une touche sur le clavier ou l'appareil.
repeatRenvoie true si la touche est retenue (hold down) plusieurs fois. Si non, renvoie false.
MéthodeDescription
getModifierState()Renvoie true si la touche précise est activée.

3- Tableau Key, KeyCode

keyCode Key (Name of key).
0 That key has no keycode
3 break
8 backspace / delete
9 tab
12 clear
13 enter
16 shift
17 ctrl
18 alt
19 pause/break
20 caps lock
21 hangul
25 hanja
27 escape
28 conversion
29 non-conversion
32 spacebar
33 page up
34 page down
35 end
36 home
37 left arrow
38 up arrow
39 right arrow
40 down arrow
41 select
42 print
43 execute
44 Print Screen
45 insert
46 delete
47 help
48 0
49 1
50 2
51 3
52 4
53 5
54 6
55 7
56 8
57 9
58 :
59 semicolon (firefox), equals
60 <
61 equals (firefox)
63 ß
64 @ (firefox)
65 a
66 b
67 c
68 d
69 e
70 f
71 g
72 h
73 i
74 j
75 k
76 l
77 m
78 n
79 o
80 p
81 q
82 r
83 s
84 t
85 u
86 v
87 w
88 x
89 y
90 z
91 Windows Key / Left ⌘ / Chromebook Search key
92 right window key
93 Windows Menu / Right ⌘
95 sleep
96 numpad 0
97 numpad 1
98 numpad 2
99 numpad 3
100 numpad 4
101 numpad 5
102 numpad 6
103 numpad 7
104 numpad 8
105 numpad 9
106 multiply
107 add
108 numpad period (firefox)
109 subtract
110 decimal point
111 divide
112 f1
113 f2
114 f3
115 f4
116 f5
117 f6
118 f7
119 f8
120 f9
121 f10
122 f11
123 f12
124 f13
125 f14
126 f15
127 f16
128 f17
129 f18
130 f19
131 f20
132 f21
133 f22
134 f23
135 f24
144 num lock
145 scroll lock
160 ^
161 !
162 ؛ (arabic semicolon)
163 #
164 $
165 ù
166 page backward
167 page forward
168 refresh
169 closing paren (AZERTY)
170 *
171 ~ + * key
172 home key
173 minus (firefox), mute/unmute
174 decrease volume level
175 increase volume level
176 next
177 previous
178 stop
179 play/pause
180 e-mail
181 mute/unmute (firefox)
182 decrease volume level (firefox)
183 increase volume level (firefox)
186 semi-colon / ñ
187 equal sign
188 comma
189 dash
190 period
191 forward slash / ç
192 grave accent / ñ / æ / ö
193 ?, / or °
194 numpad period (chrome)
219 open bracket
220 back slash
221 close bracket / å
222 single quote / ø / ä
223 `
224 left or right ⌘ key (firefox)
225 altgr
226 < /git >, left back slash
230 GNOME Compose Key
231 ç
233 XF86Forward
234 XF86Back
235 non-conversion
240 alphanumeric
242 hiragana/katakana
243 half-width/full-width
244 kanji
251 unlock trackpad (Chrome/Edge)
255 toggle touchpad