KeyboardEvent: key-Eigenschaft

Ein Zeichenfolgenwert.

Der Wert wird folgendermaßen bestimmt:

• Wenn die gedrückte Taste eine druckbare Darstellung hat, ist der zurückgegebene Wert eine nicht-leere Unicode-Zeichenfolge, die die druckbare Darstellung der Taste enthält. Zum Beispiel: Wenn die gedrückte Taste die Space-Taste ist, ist der zurückgegebene Wert ein einzelnes Leerzeichen (" "). Wenn die gedrückte Taste die B-Taste ist, ist der zurückgegebene Wert die Zeichenfolge "b". Wenn jedoch gleichzeitig die Shift-Taste gedrückt wird (also ist shiftKey true), ist der zurückgegebene Wert die Zeichenfolge "B".
• Wenn die gedrückte Taste ein Steuer- oder Sonderzeichen ist, ist der zurückgegebene Wert einer der vordefinierten Tastenwerte.
• Wenn das KeyboardEvent die Betätigung einer dead key darstellt, muss der Tastenwert "Dead" sein.
• Einige spezielle Tastaturtasten (zum Beispiel erweiterte Tasten zur Steuerung von Medien auf Multimedia-Tastaturen) erzeugen unter Windows keine Tastencodes. Stattdessen lösen sie WM_APPCOMMAND-Ereignisse aus. Diese Ereignisse werden zu DOM-Tastaturereignissen zugeordnet und sind unter den "Virtuellen Tastencodes" für Windows aufgeführt, obwohl sie tatsächlich keine Tastencodes sind.
• Wenn die Taste nicht identifiziert werden kann, ist der zurückgegebene Wert Unidentified.

Jedes KeyboardEvent wird in einer vorgegebenen Reihenfolge ausgelöst. Für eine bestimmte Tastenbetätigung ist die Reihenfolge der ausgelösten KeyboardEvents wie folgt, vorausgesetzt, Event.preventDefault wird nicht aufgerufen:

1. Ein keydown-Ereignis wird zuerst ausgelöst. Wenn die Taste weiterhin gedrückt gehalten wird und die Taste ein Zeichen produziert, wird das Ereignis in einer vom Plattformimplementierung abhängigen Intervall weiter emittiert und die schreibgeschützte Eigenschaft KeyboardEvent.repeat wird auf true gesetzt.
2. Wenn die Taste ein Zeichen produziert, das möglicherweise in ein <input>, <textarea> oder ein Element mit HTMLElement.contentEditable auf true eingefügt werden würde, werden die Ereignistypen beforeinput und input in dieser Reihenfolge ausgelöst. Beachten Sie, dass einige andere Implementierungen ein keypress-Ereignis auslösen, wenn dies unterstützt wird. Die Ereignisse werden weiterhin ausgelöst, während die Taste gedrückt gehalten wird.
3. Ein keyup-Ereignis wird ausgelöst, sobald die Taste losgelassen wird. Dies vervollständigt den Vorgang.

In den Sequenzen 1 & 3 ist die KeyboardEvent.key-Eigenschaft definiert und wird gemäß den vorher festgelegten Regeln entsprechend auf einen Wert gesetzt.

Betrachten Sie die Ereignissequenz, die generiert wird, wenn wir mit der Shift- und der 2-Taste auf einer US-amerikanischen Tastatur im Vergleich zu einer britischen Tastatur interagieren.

Probieren Sie Folgendes mit den beiden Testfällen aus:

1. Drücken und halten Sie die Shift-Taste, dann drücken und lassen Sie 2 los. Lassen Sie anschließend die Shift-Taste los.
2. Drücken und halten Sie die Shift-Taste, dann drücken und halten Sie 2. Lassen Sie die Shift-Taste los. Schließlich lassen Sie 2 los.

Wenn die Shift-Taste gedrückt wird, wird ein keydown-Ereignis zuerst ausgelöst und der key-Eigenschaftswert wird auf die Zeichenfolge Shift gesetzt. Während wir diese Taste gedrückt halten, wird das keydown-Ereignis nicht weiter wiederholt, da es keine Zeichen produziert.

Wenn die Taste 2 gedrückt wird, wird ein weiteres keydown-Ereignis für diesen neuen Tastendruck ausgelöst und der key-Eigenschaftswert für das Ereignis wird auf die Zeichenfolge @ für den US-Tastaturtyp und " für den UK-Tastaturtyp gesetzt, wegen der aktiven Modifikatortaste Shift. Die beforeinput und input-Ereignisse werden als nächstes ausgelöst, da ein Zeichen produziert wurde.

Wenn wir die Taste 2 loslassen, wird ein keyup-Ereignis ausgelöst und die key-Eigenschaft behält die Zeichenfolgenwerte @ und " für die unterschiedlichen Tastaturlayouts.

Wenn wir schließlich die SHIFT-Taste loslassen, wird ein weiteres keyup-Ereignis dafür ausgelöst und der Schlüsselattributwert bleibt Shift.

Wenn die Shift-Taste gedrückt wird, wird ein keydown-Ereignis zuerst ausgelöst und der key-Eigenschaftswert wird auf die Zeichenfolge Shift gesetzt. Während wir diese Taste gedrückt halten, wird das keydown-Ereignis nicht weiter wiederholt, da es keine Zeichen produzierte.

Wenn die Taste 2 gedrückt wird, wird ein weiteres keydown-Ereignis für diesen neuen Tastendruck ausgelöst und der key-Eigenschaftswert für das Ereignis wird auf die Zeichenfolge @ für den US-Tastaturtyp und " für den UK-Tastaturtyp gesetzt, wegen der aktiven Modifikatortaste Shift. Die beforeinput und input-Ereignisse werden als nächstes ausgelöst, da ein Zeichen produziert wurde. Während wir die Taste gedrückt halten, wird das keydown-Ereignis weiterhin wiederholt und die KeyboardEvent.repeat-Eigenschaft wird auf true gesetzt. Die beforeinput und input-Ereignisse werden ebenfalls wiederholt ausgelöst.

Wenn wir die Shift-Taste loslassen, wird ein keyup-Ereignis dafür ausgelöst und der Schlüsselattributwert bleibt Shift. Beachten Sie zu diesem Zeitpunkt, dass der key-Eigenschaftswert für das wiederholte Keydown-Ereignis der key 2-Taste jetzt "2" ist, da die Modifikatortaste Shift nicht mehr aktiv ist. Das Gleiche gilt für die InputEvent.data-Eigenschaft der beforeinput und input-Ereignisse.

Wenn wir schließlich die key 2-Taste loslassen, wird ein keyup-Ereignis ausgelöst, aber die key-Eigenschaft wird auf den Zeichenfolgenwert 2 für beide Tastaturlayouts gesetzt, da die Modifikatortaste Shift nicht mehr aktiv ist.

Dieses Beispiel verwendet EventTarget.addEventListener(), um auf keydown-Ereignisse zu hören. Wenn sie auftreten, wird der Wert der Taste geprüft, um festzustellen, ob es sich um eine der interessierenden Tasten handelt, und falls ja, wird sie in irgendeiner Weise verarbeitet (möglicherweise, um ein Raumschiff zu steuern, vielleicht um die ausgewählte Zelle in einer Tabelle zu ändern).

window.addEventListener(
  "keydown",
  (event) => {
    if (event.defaultPrevented) {
      return; // Do nothing if the event was already processed
    }

    switch (event.key) {
      case "ArrowDown":
        // Do something for "down arrow" key press.
        break;
      case "ArrowUp":
        // Do something for "up arrow" key press.
        break;
      case "ArrowLeft":
        // Do something for "left arrow" key press.
        break;
      case "ArrowRight":
        // Do something for "right arrow" key press.
        break;
      case "Enter":
        // Do something for "enter" or "return" key press.
        break;
      case " ":
        // Do something for "space" key press.
        break;
      case "Escape":
        // Do something for "esc" key press.
        break;
      default:
        return; // Quit when this doesn't handle the key event.
    }

    // Cancel the default action to avoid it being handled twice
    event.preventDefault();
  },
  true,
);