Skip to content

Commit 2b44781

Browse files
committed
fixes
1 parent 668bdf7 commit 2b44781

File tree

6 files changed

+25
-10
lines changed

6 files changed

+25
-10
lines changed

1-js/08-prototypes/01-prototype-inheritance/article.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -312,7 +312,6 @@ All other key/value-getting methods, such as `Object.keys`, `Object.values` and
312312
They only operate on the object itself. Properties from the prototype are taken into account.
313313
```
314314

315-
316315
## Summary
317316

318317
- In JavaScript, all objects have a hidden `[[Prototype]]` property that's either another object or `null`.

2-ui/3-event-details/5-keyboard-events/article.md

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -75,13 +75,11 @@ Please note that `event.code` specifies exactly which key is pressed. For instan
7575
7676
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.
7777
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`?
7979
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.
8181
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:
82+
Like this:
8583
8684
```js run
8785
document.addEventListener('keydown', function(event) {
@@ -91,6 +89,25 @@ document.addEventListener('keydown', function(event) {
9189
});
9290
```
9391

92+
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+
![](us-layout.png)
97+
98+
![](german-layout.png)
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+
94111
## Auto-repeat
95112

96113
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.
146163

147164
In the past, there was a `keypress` event, and also `keyCode`, `charCode`, `which` properties of the event object.
148165

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.
152167

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.
153169

154170
## Summary
155171

@@ -165,6 +181,6 @@ Main keyboard event properties:
165181
- `code` -- the "key code" (`"KeyA"`, `"ArrowLeft"` and so on), specific to the physical location of the key on keyboard.
166182
- `key` -- the character (`"A"`, `"a"` and so on), for non-character keys usually has the same value as `code`.
167183

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.
169185

170186
We should use keyboard events when we really want keyboard. For example, to react on hotkeys or special keys.
55.9 KB
Loading
34.5 KB
Loading
35.4 KB
Loading
56.4 KB
Loading

0 commit comments

Comments
 (0)