JavaScript: Obsługa klawiatury

Jak podpiąć się pod klawiaturę?

Żeby obsłużyć klawiaturę, w JavaScript posłużymy się zdarzenia

Obsługa klawiatury w JavaScript odbywa się za pomocą zdarzeń.

Mam następujące zdarzenia:

keydown — To zdarzenie jest wysłane kiedy użytkownik wciśnie klawisz na klawiaturze.

keyup — Zdarzenie zostaje wysłane kiedy zwolni wciśnięty klawisz.

Podpięcie obsługi zdarzeń klawiatury

Kod wygląda następująco:

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

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

Obiekt KeyboardEvent

Kiedy następuje interakcja użytkownika z klawiaturą, wysłane zostaje zdarzenie typu KeyboardEvent. Otrzymujemy je przy nasłuchiwaniu zdarzeń: keydown i keyup.

Ma następujące właściwości:

Atrybut code

Informuje jaki klawisz został wciśnięty.

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

Dla liter dostaniemy wartość: KeyA, KeyB itd.

Dla liczb: Digit1, Digit2 itd.

Jeśli chcesz sprawdzić, czy został wciśnięty lewy lub prawy: Shift, Alt lub Ctrl skorzystaj z tego atrybutu.

Atrybut key

Także informuje jaki klawisz został wciśnięty, ale z tego atrybutu dowiem się znacznie więcej niż z code.

Jest to przydatne kiedy bierzemy pod uwagę, jaki język jest obsługiwany oraz układ klawiatury. Dodatkowo dzięki temu atrybutowi dowiemy się, czy została wciśnięta duża, czy mała litera.

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

Dla liter dostaniemy wartość: a, b, c, d itd.

Dla liczb: 1, 2, 3, itd

Klawisze: Shift, Ctrl, Alt

Załóżmy, że chcemy sprawdzić, czy został wciśnięty któryś z klawiszy: Shift, Ctrl, Alt. Możemy to zrobić za pomocą specjalnych atrybutów: shiftKey, ctrlKey, altKey.

Jeśli któryś z tych klawiszy został wciśnięty przy odpowiednim atrybucie zostanie ustawiona wartość true.

Przykład dla przycisku Ctrl:

document.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.key === 'a') {
    console.log('Clicked CTRL + A!');
  }
});

Atrybut repeat

Jeśli chcemy się dowiedzieć czy wciśnięty klawisz dalej jest przytrzymywany możemy posłużyć się atrybutem repeat. Jeśli ma wartość true to znaczy, że dany klawisz cały czas jest wciśnięty:

document.addEventListener('keydown', (e) => {
  console.log(`key: ${e.key} is repeat: ${e.repeat}`);
});