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:Backspace` та `key:Delete`: ```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`... під час натискання певних клавіш, таких як стрілки або видалення, немає гарантії, тому ваша логіка клавіатури може не завжди працювати на мобільних пристроях. -## 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