Creating single-key shortcuts

Single-Key Shortcuts sind einfach zu implementieren:

1. EventListener auf keydown Event legen
2. Prüfen, ob der event.key der gewünschten Taste entspricht
3. Shortcut aktivieren

Wir wollen die Esc Taste verwenden, um eine Anwendung zu verlassen:

document.addEventListener('keydown', e => {
  if (event.key === 'Escape') {
    console.log('Quit feature!');
  }
});

Handling multiple single-key shortcuts

Dafür genügt ein EventListener. Wir müssen nicht mehrere einrichten.

Beispiel: wir wollen mit h ein Hilfe-Menü öffnen und wir wollen mit Esc eine Anwendung beenden:

document.addEventListener('keydown', e => {
  const { key } = event;
  if (key === 'h') {
    console.log('Open help menu');
  }
  if (key === 'Escape') {
    console.log('Quit feature');
  }
});

Wenn der Code recht komplex wird, kann es trotzdem besser sein, mehrere EventListener zu benützen.

Ignoring cases

Wenn es keine Rolle spielt, ob ein User Groß- oder Kleinbuchstaben verwendet, können wir diese Fälle ignorieren. Das bedeutet, dass wir die Eingaben zuerst in Kleinbuchstaben umwandeln und dann erst testen.

document.addEventListener('keydown', e => {
  const key = event.key.toLowerCase();
  if (key === 'h') {
    console.log('Open help menu');
  }
});

Das macht es theoretisch auch einfacher, auf die Escape-Taste zu lauschen, da wir auf die Großschreibung verzichten können (nur für Englischsprachige wirklich wichtig …).

document.addEventListener('keydown', e => {
  const key = event.key.toLowerCase();
  if (key === 'escape') {
    console.log('Quit feature');
  }
});

Single key with modifiers

Wir können Single-Key Shortcuts mit Modifiern erfassen:

1. Shift mit event.shiftKey
2. Strg/Control mit event.ctrlKey
3. Option mit event.metaKey
4. Alt/Command mit event.altKey

document.addEventListener('keydown', e => {
  console.log(event.shiftKey);
  console.log(event.ctrlKey);
  console.log(event.metaKey);
  console.log(event.altKey);
});