You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/3-event-details/5-keyboard-events/article.md
+25-9Lines changed: 25 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -75,13 +75,11 @@ Please note that `event.code` specifies exactly which key is pressed. For instan
75
75
76
76
Let's say, we want to handle a hotkey: `key:Ctrl+Z` (or `key:Cmd+Z` for Mac). Most text editors hook the "Undo" action on it. We can set a listener on `keydown` and check which key is pressed -- to detect when we have the hotkey.
77
77
78
-
Please answer the question -- in such a listener, should we check the value of `event.key` or `event.code`?
78
+
There's a dilemma here: in such a listener, should we check the value of `event.key` or `event.code`?
79
79
80
-
Please, pause and answer.
80
+
On one hand, the value of `event.key` changes depending on the language. If the visitor has several languages in OS and switches between them, the same key gives different characters. So it makes sense to check `event.code`, it's always the same.
81
81
82
-
Made up your mind?
83
-
84
-
If you've got an understanding, then the answer is, of course, `event.code`, as we don't want `event.key` there. The value of `event.key` can change depending on the language or `CapsLock` enabled. The value of `event.code` is strictly bound to the key, so here we go:
On the other hand, there's a problem with `event.code`. For different keyboard layouts, the same key may have different labels (letters).
93
+
94
+
For example, here are US layout ("QWERTY") and German layout ("QWERTZ") under it (courtesy of Wikipedia):
95
+
96
+

97
+
98
+

99
+
100
+
For the same key, US layout has "Z", while German layout has "Y" and (letters are swapped).
101
+
102
+
So, `event.code` will equal `KeyZ` for German people who press "Y". Just because the keyboard layout is different.
103
+
104
+
That sounds odd, but so it is. The [specification](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system) explicitly mentions such behavior.
105
+
106
+
-`event.code` has the benefit of being the same, even if the visitor changes languages. So hotkeys that rely on it work well even in case of a language switch.
107
+
-`event.code` may match a wrong character for unexpected layout. Same letters in different layouts may be at different keyboard keys, leading to different codes. That happens for several codes, e.g. `keyA`, `keyQ`, `keyZ`. You can find the list in the [specification](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system).
108
+
109
+
So, to reliably track layout-dependent characters, `event.key` may be a better way.
110
+
94
111
## Auto-repeat
95
112
96
113
If a key is being pressed for a long enough time, it starts to repeat: the `keydown` triggers again and again, and then when it's released we finally get `keyup`. So it's kind of normal to have many `keydown` and a single `keyup`.
@@ -146,10 +163,9 @@ Now arrows and deletion works well.
146
163
147
164
In the past, there was a `keypress` event, and also `keyCode`, `charCode`, `which` properties of the event object.
148
165
149
-
There were so many browser incompatibilities that developers of the specification decided to deprecate all of them. The old code still works, as the browser keep supporting them, but there's totally no need to use those any more.
150
-
151
-
There was time when this chapter included their detailed description. But as of now we can forget about those.
166
+
There were so many browser incompatibilities that developers of the specification decided to deprecate all of them. The old code still works, as browsers keep supporting them, but there's totally no need to use those any more.
152
167
168
+
There was a time when this chapter included their detailed description. But as of now it was removed and replaced with more details about the modern event handling.
153
169
154
170
## Summary
155
171
@@ -165,6 +181,6 @@ Main keyboard event properties:
165
181
-`code` -- the "key code" (`"KeyA"`, `"ArrowLeft"` and so on), specific to the physical location of the key on keyboard.
166
182
-`key` -- the character (`"A"`, `"a"` and so on), for non-character keys usually has the same value as `code`.
167
183
168
-
In the past, keyboard events were sometimes used to track user input in form fields. That's not reliable, because the input can come from various sources. We have `input` and `change` events to handle any input (covered later in the chapter <info:events-change-input>). They trigger after any input, including mouse or speech recognition.
184
+
In the past, keyboard events were sometimes used to track user input in form fields. That's not reliable, because the input can come from various sources. We have `input` and `change` events to handle any input (covered later in the chapter <info:events-change-input>). They trigger after any kind of input, including copy-pasting or speech recognition.
169
185
170
186
We should use keyboard events when we really want keyboard. For example, to react on hotkeys or special keys.
0 commit comments