From 0b23130b17166cb8628b5a00a62e37b362af2245 Mon Sep 17 00:00:00 2001 From: Olha Brozhenets Date: Tue, 25 Jan 2022 18:19:36 +0200 Subject: [PATCH 1/5] Adds keyboard events --- .../2-check-sync-keydown/solution.md | 6 +- .../solution.view/index.html | 18 +- .../2-check-sync-keydown/task.md | 8 +- .../7-keyboard-events/article.md | 172 +++++++++--------- .../keyboard-dump.view/index.html | 10 +- 5 files changed, 107 insertions(+), 107 deletions(-) diff --git a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md index 453f8c946..f88f2477d 100644 --- a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md +++ b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.md @@ -1,6 +1,6 @@ -We should use two handlers: `document.onkeydown` and `document.onkeyup`. +Ми повинні використовувати два обробники: `document.onkeydown` і `document.onkeyup`. -Let's create a set `pressed = new Set()` to keep currently pressed keys. +Давайте створимо набір `pressed = new Set()`, щоб зберегти поточні натиснуті клавіші. -The first handler adds to it, while the second one removes from it. Every time on `keydown` we check if we have enough keys pressed, and run the function if it is so. +Перший обробник додає до нього, а другий видаляє. Кожного разу при `keydown` ми перевіряємо, чи достатньо натиснутих клавіш, і запускаємо функцію, якщо це так. diff --git a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html index 6e86d2455..3e40b055b 100644 --- a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html +++ b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html @@ -2,7 +2,7 @@ -

Press "Q" and "W" together (can be in any language).

+

Натисніть "Q" і "W" разом (можна будь-якою мовою).

- + ``` -The `onkeydown` handler here uses `checkPhoneKey` to check for the key pressed. If it's valid (from `0..9` or one of `+-()`), then it returns `true`, otherwise `false`. +Обробник `onkeydown` використовує тут `checkPhoneKey` для перевірки натиснення клавіші. Якщо вона валідна (від `0..9` або з `+-()`), обробник повертає `true`, інакше `false`. -As we know, the `false` value returned from the event handler, assigned using a DOM property or an attribute, such as above, prevents the default action, so nothing appears in the `` for keys that don't pass the test. (The `true` value returned doesn't affect anything, only returning `false` matters) +Як ми знаємо, значення `false`, що повертається з обробника подій та присвоєне за допомогою властивості DOM або атрибута, як-от вище, запобігає типовій дії. Саме тому для клавіш, які не проходять тест, у `` нічого не з’являється. (Повернуте значення `true` ні на що не впливає, має значення лише повернення `false`) -Please note that special keys, such as `key:Backspace`, `key:Left`, `key:Right`, do not work in the input. That's a side-effect of the strict filter `checkPhoneKey`. These keys make it return `false`. +Зверніть увагу, що спеціальні клавіші, такі як `key:Backspace`, `key:Left`, `key:Right`, не працюють у полі для введення. Це побічний ефект суворого фільтра `checkPhoneKey`. Ці клавіші повертають `false`. -Let's relax the filter a little bit by allowing arrow keys `key:Left`, `key:Right` and `key:Delete`, `key:Backspace`: +Давайте трохи послабимо фільтр, дозволивши клавіші зі стрілками `key:Left`, `key:Right`, `key:Delete` та `key:Backspace`: ```html autorun height=60 run - + ``` -Now arrows and deletion works well. +Тепер стрілки та видалення працюють добре. -Even though we have the key filter, one still can enter anything using a mouse and right-click + Paste. Mobile devices provide other means to enter values. So the filter is not 100% reliable. +Незважаючи на те, що у нас є фільтр клавіш, все одно можна ввести будь-що за допомогою миші та клацнути правою кнопкою миші + "Вставити". Мобільні пристрої надають інші засоби для введення значень. Тому фільтр не є надійним на 100%. -The alternative approach would be to track the `oninput` event -- it triggers *after* any modification. There we can check the new `input.value` and modify it/highlight the `` when it's invalid. Or we can use both event handlers together. +Альтернативним підходом було б відстежувати подію `oninput` -- вона запускається *після* будь-якої модифікації. Там ми можемо перевірити новий `input.value` та змінити його/виділити ``, якщо він недійсний. Або ми можемо використовувати обидва обробники подій разом. -## Legacy +## Застарілий код -In the past, there was a `keypress` event, and also `keyCode`, `charCode`, `which` properties of the event object. +У минулому була подія `keypress`, а також `keyCode`, `charCode`, `which` властивості об’єкта події. -There were so many browser incompatibilities while working with them, that developers of the specification had no way, other than deprecating all of them and creating new, modern events (described above in this chapter). The old code still works, as browsers keep supporting them, but there's totally no need to use those any more. +Під час роботи з ними було так багато несумісностей у браузерах, що у розробників специфікації не було іншого виходу, окрім як відмовитися від усіх них і створити нові, сучасні події (описані вище в цьому розділі). Старий код все ще працює, оскільки браузери продовжують підтримувати його, але більше немає потреби використовувати його. -## Mobile Keyboards +## Мобільні клавіатури -When using virtual/mobile keyboards, formally known as IME (Input-Method Editor), the W3C standard states that a KeyboardEvent's [`e.keyCode` should be `229`](https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode) and [`e.key` should be `"Unidentified"`](https://www.w3.org/TR/uievents-key/#key-attr-values). +Під час використання віртуальних/мобільних клавіатур, офіційно відомих як IME (Input-Method Editor), стандарт W3C стверджує, що [`e.keyCode`] події клавіатури має бути `229` (https://www.w3.org/TR/ uievents/#determine-keydown-keyup-keyCode), а [`e.key` має бути "Unidentified"`](https://www.w3.org/TR/uievents-key/#key-attr-values) . -While some of these keyboards might still use the right values for `e.key`, `e.code`, `e.keyCode`... when pressing certain keys such as arrows or backspace, there's no guarantee, so your keyboard logic might not always work on mobile devices. +Хоча деякі з цих клавіатур все ще можуть використовувати правильні значення для `e.key`, `e.code`, `e.keyCode`... під час натискання певних клавіш, таких як стрілки або Backspace, немає гарантії, тому ваша логіка клавіатури може не завжди працювати на мобільних пристроях. -## Summary +## Підсумки -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 sometimes presents on a laptop keyboard. There's no keyboard event for it, because it's often implemented on lower level than OS. +Натискання клавіші завжди генерує подію на клавіатурі, будь то клавіші-символи або спеціальні клавіші, як-от `key:Shift` або `key:Ctrl` тощо. Єдиним винятком є клавіша `key:Fn`, яка іноді зустрічається на клавіатурі ноутбука. Для неї немає жодних подій клавіатури, оскільки вони часто реалізуються на нижчому рівні, ніж ОС. -Keyboard events: +Події клавіатури: -- `keydown` -- on pressing the key (auto-repeats if the key is pressed for long), -- `keyup` -- on releasing the key. +- `keydown` -- при натисканні клавіші (автоматично повторюється, якщо клавіша довго утримується), +- `keyup` -- при відпусканні клавіші. -Main keyboard event properties: +Основні властивості події клавіатури: -- `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, such as `key:Esc`, usually has the same value as `code`. +- `code` -- "код клавіші" (`"KeyA"`, `"ArrowLeft"` і так далі), специфічний для фізичного розташування клавіші на клавіатурі. +- `key` -- символ (`"A"`, `"a"` і так далі), для несимвольних ключів, таких як `key:Esc`, зазвичай має те саме значення, що і `code`. -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 ). They trigger after any kind of input, including copy-pasting or speech recognition. +У минулому події клавіатури іноді використовувалися для відстеження даних, які користувач ввів у поля форми. Це ненадійно, оскільки вхідні дані можуть надходити з різних джерел. У нас є події `input` та `change` для обробки будь-якого введення (розглянуто далі в розділі ). Вони запускаються після будь-якого типу введення, включаючи копіювання або розпізнавання мовлення. -We should use keyboard events when we really want keyboard. For example, to react on hotkeys or special keys. +Ми повинні використовувати події клавіатури, коли нам дійсно потрібна клавіатура. Наприклад, реагувати на гарячі або спеціальні клавіші. diff --git a/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html b/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html index a0d5a4f40..937e260d7 100644 --- a/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html +++ b/2-ui/3-event-details/7-keyboard-events/keyboard-dump.view/index.html @@ -10,26 +10,26 @@
- Prevent default for: + Запобігти типовій дії для:    

- Ignore: + Ігнорувати:    

-

Focus on the input field and press a key.

+

Поставте фокус на полі введення та натисніть клавішу.

- + - +
From aea3eb2083c1ed8f906c85d1c9df6255b14d8dae Mon Sep 17 00:00:00 2001 From: Olha Brozhenets Date: Tue, 25 Jan 2022 18:37:10 +0200 Subject: [PATCH 2/5] Adds keyboard events edits --- .../solution.view/index.html | 4 +-- .../7-keyboard-events/article.md | 26 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html index 3e40b055b..3158280b6 100644 --- a/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html +++ b/2-ui/3-event-details/7-keyboard-events/2-check-sync-keydown/solution.view/index.html @@ -19,8 +19,8 @@ // так - // під час оповіщення, якщо відвідувач відпускає ключі, - // JavaScript не отримує подію "keyup". + // під час оповіщення, якщо відвідувач відпускає клавіші, + // JavaScript не отримує подію "keyup" // і натиснутий set продовжуватиме вважати, що клавіша натиснута // отже, щоб уникнути «липких» клавіш, ми скидаємо статус // якщо користувач хоче знову запустити гарячу клавішу - дозвольте йому знову натиснути всі клавіші diff --git a/2-ui/3-event-details/7-keyboard-events/article.md b/2-ui/3-event-details/7-keyboard-events/article.md index 13368c061..3ba5582d6 100644 --- a/2-ui/3-event-details/7-keyboard-events/article.md +++ b/2-ui/3-event-details/7-keyboard-events/article.md @@ -1,6 +1,6 @@ # Клавіатура: keydown та keyup -Перш ніж ми перейдемо до клавіатури, зверніть увагу, що на сучасних пристроях є й інші способи «щось ввести». Наприклад, люди використовують розпізнавання мовлення (особливо на мобільних пристроях) або копіюють/вставляють за допомогою миші. +Перш ніж ми перейдемо до клавіатури, зверніть увагу, що на сучасних пристроях є й інші способи "щось ввести". Наприклад, люди використовують розпізнавання мовлення (особливо на мобільних пристроях) або копіюють/вставляють за допомогою миші. Тож якщо ми хочемо відстежувати будь-яке введення даних у поле ``, то подій клавіатури недостатньо. Існує ще одна подія під назвою `input` для відстеження змін у полі `` будь-яким способом. І це може бути кращим рішенням такого завдання. Ми розглянемо цю подію пізніше в розділі . @@ -26,13 +26,13 @@ Події `keydown` відбуваються, коли клавішу натискають, а потім `keyup`, коли її відпускають. -### event.code and event.key +### event.code та event.key Властивість `key` об’єкта події дозволяє отримати символ, а властивість `code` об’єкта події дозволяє отримати "фізичний код клавіші". Наприклад, ту саму клавішу `key:Z` можна натискати з або без клавіші `key:Shift`. Це дає нам два різних символи: малий `z` і великий `Z`. -`event.key` - це саме символ, і він може бути різним. Але `event.code` однаковий: +`event.key` -- це саме символ, і він може бути різним. Але `event.code` однаковий: | Клавіша | `event.key` | `event.code` | |--------------|-------------|--------------| @@ -40,7 +40,7 @@ | `key:Shift+Z`|`Z` (верхній регістр) |`KeyZ` | -Якщо користувач працює з різними мовами, то при перемиканні на іншу мову замість `"Z`" буде зовсім інший символ. Це стане значенням `event.key`, тоді як `event.code` завжди однаковим: `"KeyZ"`. +Якщо користувач працює з різними мовами, то при перемиканні на іншу мову замість `"Z"` буде зовсім інший символ. Він стане значенням `event.key`, тоді як `event.code` буде завжди однаковим: `"KeyZ"`. ```smart header="\"KeyZ\" та інші коди клавіш" Кожна клавіша має код, який залежить від її розташування на клавіатурі. Ключові коди, описані в [Специфікації коду UI подій](https://www.w3.org/TR/uievents-code/). @@ -71,7 +71,7 @@ Зверніть увагу, що `event.code` точно визначає, яка клавіша натиснута. Наприклад, більшість клавіатур мають дві клавіші `key:Shift`: ліворуч і праворуч. `event.code` говорить нам, яка саме була натиснута, а `event.key` відповідає за "значення" клавіші: яка це саме клавіша (це "Shift"). -Скажімо, ми хочемо обробити гарячу клавішу: `key:Ctrl+Z` (або `key:Cmd+Z` для Mac). Більшість текстових редакторів підключають до неї дію «Скасувати». Ми можемо встановити прослуховувач на `keydown` і перевірити, яка клавіша натиснута. +Скажімо, ми хочемо обробити гарячу клавішу: `key:Ctrl+Z` (або `key:Cmd+Z` для Mac). Більшість текстових редакторів підключають до неї дію "Скасувати". Ми можемо встановити прослуховувач на `keydown` і перевірити, яка клавіша натиснута. Тут виникає дилема: у такому прослуховуванні ми перевіряємо значення `event.key` або `event.code`? @@ -95,7 +95,7 @@ document.addEventListener('keydown', function(event) { ![](german-layout.svg) -Для тієї ж клавіші американська розкладка має «Z», а німецька — «Y» (букви змінюються місцями). +Для тієї ж клавіші американська розкладка має "Z", а німецька — "Y" (букви змінюються місцями). Без перебільшень, `event.code` буде дорівнювати `KeyZ` для людей з німецькою розкладкою, коли вони натиснуть `key:Y`. @@ -103,11 +103,11 @@ document.addEventListener('keydown', function(event) { Звучить дуже дивно, але так і є. У [специфікації](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system) чітко згадується така поведінка. -Отже, `event.code` може збігатися з неправильним символом для неочікуваної розкладки. Одні й ті самі букви в різних розкладках можуть зіставлятися з різними фізичними клавішами, що призводить до різних кодів. На щастя, це відбувається лише з кількома кодами, напр. `keyA`, `keyQ`, `keyZ` (як ми бачили), і не відбувається зі спеціальними клавішами, такими як `Shift`. Список можна знайти в [специфікації](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system). +Отже, `event.code` може збігатися з неправильним символом для неочікуваної розкладки. Одні й ті самі букви в різних розкладках можуть зіставлятися з різними фізичними клавішами, що призводить до різних кодів. На щастя, це відбувається лише з кількома кодами, напр. `keyA`, `keyQ`, `keyZ` (як ми бачили), і не відбувається зі спеціальними клавішами, такими як `Shift`. Список можна знайти в [специфікації](https://www.w3.org/TR/uievents-code/#table-key-code-alphanumeric-writing-system). Для надійного відстеження символів, що залежать від розкладки, `event.key` може бути кращим рішенням. -З іншого боку, `event.code` має перевагу, так як залішається завжди однаковим, прив’язаним до місця розташування фізичної клавіші, навіть якщо відвідувач змінює мови. Тому гарячі клавіші, які покладаються на нього, працюють добре навіть у разі перемикання мови. +З іншого боку, `event.code` має перевагу, так як залишається завжди однаковим, прив’язаним до місця розташування фізичної клавіші, навіть якщо відвідувач змінює мови. Тому гарячі клавіші, які покладаються на нього, працюють добре навіть у разі перемикання мови. Чи хочемо ми обробляти клавіші, що залежать від розкладки? Тоді `event.key` -- це вихід. @@ -129,7 +129,7 @@ document.addEventListener('keydown', function(event) { - На екрані з’являється символ (найбільш очевидний результат). - Символ видалено (`key:Delete` клавіша). - Сторінка прокручується (`key:PageDown` клавіша). -- Браузер відкриває діалогове вікно «Зберегти сторінку». (`key:Ctrl+S`) +- Браузер відкриває діалогове вікно "Зберегти сторінку". (`key:Ctrl+S`) - ...і так далі. Запобігання типовій дії на `keydown` може скасувати більшість з них, за винятком спеціальних клавіш на основі ОС. Наприклад, у Windows `key:Alt+F4` закриває поточне вікно браузера. І немає способу зупинити це, запобігаючи типовій дії у JavaScript. @@ -151,7 +151,7 @@ function checkPhoneKey(key) { Зверніть увагу, що спеціальні клавіші, такі як `key:Backspace`, `key:Left`, `key:Right`, не працюють у полі для введення. Це побічний ефект суворого фільтра `checkPhoneKey`. Ці клавіші повертають `false`. -Давайте трохи послабимо фільтр, дозволивши клавіші зі стрілками `key:Left`, `key:Right`, `key:Delete` та `key:Backspace`: +Давайте трохи послабимо фільтр, дозволивши клавіші зі стрілками `key:Left`, `key:Right`, `key:Backspace` та `key:Delete`: ```html autorun height=60 run