up

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

@@ -1,6 +1,6 @@
 # Keyboard: keydown and keyup
 
-Let's study keyboard events now.
+Let's study keyboard events.
 
 Before we start, please note that on modern devices there are other ways to "input something" then just a keyboard. For instance, people use speech recognition (tap microphone, say something, see it entered) or copy/paste with a mouse.
 
@@ -30,7 +30,7 @@ As you read on, if you want to try things out -- return to the stand and press k
 
 ## Keydown and keyup
 
-The `keydown` events happens when a key is pressed, and then `keyup` -- when it's released.
+The `keydown` events happens when a key is pressed down, and then `keyup` -- when it's released.
 
 ### event.code and event.key
 
@@ -49,7 +49,8 @@ The `event.key` is exactly the character, and it will be different. But `event.c
 Key codes like `"KeyZ"` in the example above are described in the [UI Events code specification](https://www.w3.org/TR/uievents-code/).
 
 For instance:
-- Letter keys have codes `"Key<letter>"`
+- Letter keys have codes `"Key<letter>"`: `"KeyA"`, `"KeyB"` etc.
+- Digit keys have codes: `"Digit<number>"`: `"Digit0"`, `"Digit1"` etc.
 - Special keys are coded by their names: `"Enter"`, `"Backspace"`, `"Tab"` etc.
 
 See [alphanumeric section](https://www.w3.org/TR/uievents-code/#key-alphanumeric-section) for more examples, or just try the [teststand](#keyboard-test-stand) above.
@@ -102,42 +103,60 @@ For all repeating keys the event object has `event.return=true`.
 
 ## Default actions
 
-Default actions vary, as there are many possible things that may be initiated by keyboard:
+Default actions vary, as there are many possible things that may be initiated by keyboard.
 
 For instance:
 
-- A character appears on the screen (the most obvious one).
+- A character appears on the screen (the most obvious outcome).
 - A character is deleted (`key:Delete` key).
 - The page is scrolled (`key:PageDown` key).
 - The browser opens the "Save Page" dialog (`key:Ctrl+S`)
 -  ...and so on.
 
-Preventing the default actions cancels most of them, with the sole exception of OS-based special keys.
+Preventing the default action on `keydown` can cancel most of them, with the exception of OS-based special keys. For instance, on Windows `key:Alt+F4` closes the current browser window. And there's no way to stop it by preventing the default action in JavaScript.
 
-For instance, on Windows `key:Alt+F4` closes the current browser window. And there's no way to stop it by preventing the default action in JavaScript.
-
-For instance, we can't use keyboard to enter something into the `<input>` below:
+For instance, the `<input>` below expects a phone number, so it does not accept keys except digits, `+`, `()` or `-`:
 
 ```html run
-<input *!*onkeydown="return false"*/!* placeholder="No keyboard input" type="text">
+<script>
+function checkPhoneKey(key) {
+  return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-';
+}
+</script>
+<input *!*onkeydown="return checkPhoneKey(event.key)"*/!* placeholder="Phone, please" type="tel">
 ```
 
-If we type-in something, it's just ignored. Please note that special combinations like `Ctrl+V` (paste) also don't work. But using a mouse and right-click + Paste still can add the text. So checking in `keydown` doesn't work as a 100% reliable filter.
+Please note that special keys like `key:Backspace`, `key:Left`, `key:Right`, `key:Ctrl+V` do not work. That's a side-effect effect of the strict filter `checkPhoneKey`.
+
+Let's relax it a little bit:
+
+
+```html run
+<script>
+function checkPhoneKey(key) {
+  return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-' ||
+    key == 'ArrowLeft' || key == 'ArrowRight' || key == 'Delete' || key == 'Backspace';
+}
+</script>
+<input *!*onkeydown="return checkPhoneKey(event.key)"*/!* placeholder="Phone, please" type="tel">
+```
+
+Now arrows and deletion works well.
+
+But we still can enter anything by using a mouse and right-click + Paste. So the filter is not 100% reliable. We can just let it be like that, because that usually works. Or an alternative approach would be to track the `input` event -- it triggers after any modification. There we can check the new value and highlight/modify it when it's invalid.
 
 ## Legacy
 
 In the past, there was a `keypress` event, and also `keyCode`, `charCode`, `which` properties of the event object.
 
-But there were so many incompatibilities between browsers that all of them are deprecated and removed from the standard. So the old code still works (and sometimes works around a bunch of quirks), but there's totally no need to use those any more.
+There were so many browser incompatibilities that standard developers decided to deprecate all of them and remove from the specification. The old code still works, as the browser keep supporting them, but there's totally no need to use those any more.
 
 There was time when this chapter included their detailed description. But as of now we can forget about those.
 
 
 ## Summary
 
-All keys yield keyboard events -- be it symbol keys or special keys like `key:Shift` or `key:Ctrl`.
-
-The only exception is `key:Fn` key that is sometimes present on laptop keyboards. There's no keyboard event for it, because it's often implemented on lower-level than OS.
+Pressing a key always generates a keyboard event, be it symbol keys or special keys like `key:Shift` or `key:Ctrl` and so on. The only exception is `key:Fn` key that is sometimes present on laptop keyboards. There's no keyboard event for it, because it's often implemented on lower level than OS.
 
 Keyboard events:
 
@@ -146,9 +165,9 @@ Keyboard events:
 
 Main keyboard event properties:
 
-- `code` -- the "key code", specific to the physical location of the key on keyboard.
-- `key` -- the character, for non-character keys a "code value", usually same as `code`.
+- `code` -- the "key code" (`"KeyA"`, `"ArrowLeft"` and so on), specific to the physical location of the key on keyboard.
+- `key` -- the character (`"A"`, `"a"` and so on), for non-character keys usually has the same value  as `code`.
 
 In the past, keyboard events were sometimes used to track user input in form fields. That's not the case any more, because we have `input` and `change` events for that (to be covered later). They are better, because they work for all ways of input, including mouse or speech recognition.
 
-We still should use them when we really want keyboard. For example, to react on hotkeys or special keys.
+We should use keyboard events when we really want keyboard. For example, to react on hotkeys or special keys.