Події клавіатури

Існує дві основні події клавіатури: keydown і keyup. На відміну від інших, події клавіатури обробляються на документі, а не на конкретному елементі. Об'єкти подій клавіатури походять від базового класу KeyboardEvent.

document.addEventListener("keydown", event => {
  console.log("Keydown: ", event);
});

document.addEventListener("keyup", event => {
  console.log("Keyup: ", event);
});

Натискаючи клавішу, спочатку відбувається keydown, після чого - keyup, коли клавішу відпустили. На практиці переважно обробляють тільки подію keydown, оскільки вона відбувається швидше за keyup, і користувач раніше бачить результат натискання. Події keydown і keyup спрацьовують при натисканні будь-якої клавіші, включно зі службовими (Ctrl, Shift, Alt, Escape тощо).

Цікаво

Раніше була ще одна подія клавіатури - keypress. Більшість постів на форумах і блогах все ще можуть її використовувати, але будьте обережні - вона застаріла і підтримка у нових браузерах може припинитися в будь-який момент.

Властивості key і code

Властивість key повертає символ, згенерований натисканням клавіші, враховуючи стан клавіш-модифікаторів, наприклад, Shift, а також поточну мову. Властивість code повертає код фізичної клавіші на клавіатурі і не залежить від мови.

document.addEventListener("keydown", event => {
  console.log("key: ", event.key);
  console.log("code: ", event.code);
});

Наведіть фокус у вікно прикладу, клікнувши по ньому мишкою, відстеження подій клавіатури знаходиться на елементі document. Надрукуйте щось на клавіатурі і подивіться результат.

Клавіші-модифікатори

Для обробки комбінації клавіш, наприклад Ctrl + s або будь-якої іншої, на об'єкті події є властивості ctrlKey, altKey, shiftkey і metaKey, що зберігають булеве значення, яке сигналізує про те, чи була затиснута клавіша-модифікатор.

document.addEventListener("keydown", event => {
  event.preventDefault();

  if ((event.ctrlKey || event.metaKey) && event.code === "KeyS") {
    console.log("«Ctrl + s» or «Command + s» combo");
  }
});

Деякі комбінації клавіш можуть конфліктувати з поведінкою браузера за замовчуванням. Наприклад, Ctrl + d або Command + d робить закладку. Потрібно намагатися проектувати систему комбінацій сторінки таким чином, щоб вона не перетиналася із вбудованою у браузері. Але, у крайньому разі, поведінку за замовчуванням можна скасувати, викликавши метод event.preventDefault().

Цікаво

Не так давно, замість властивостей key і code, використовували властивість keyCode. Більшість постів на форумах і блогах все ще можуть використовувати її, але будьте обережні - вона застаріла, не використовуйте властивість keyCode.