Element: keyup event

Das keyup-Ereignis wird ausgelöst, wenn eine Taste losgelassen wird.

Die keydown und keyup Ereignisse liefern einen Code, der angibt, welche Taste gedrückt wird, während keypress angibt, welches Zeichen eingegeben wurde. Zum Beispiel wird ein kleines "a" von keydown und keyup als 65 gemeldet, aber von keypress als 97. Ein großes "A" wird von allen Ereignissen als 65 gemeldet.

Das Ereignisziel eines Tastenereignisses ist das aktuell fokussierte Element, das die Tastaturaktivität verarbeitet. Dazu gehören: <input>, <textarea>, alles, was contentEditable ist, und alles andere, das mit der Tastatur interagiert werden kann, wie <a>, <button>, und <summary>. Wenn kein geeignetes Element im Fokus ist, wird das Ereignisziel der <body> oder die Wurzel sein. Wenn es nicht abgefangen wird, blubbert das Ereignis den DOM-Baum hinauf, bis es Document erreicht.

Das Ereignisziel kann sich zwischen verschiedenen Tastenereignissen ändern. Zum Beispiel wäre das keydown-Ziel für das Drücken der Tab-Taste anders als das keyup-Ziel, da sich der Fokus geändert hat.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.

js
addEventListener("keyup", (event) => {});

onkeyup = (event) => {};

Ereignistyp

Ereigniseigenschaften

Diese Schnittstelle erbt auch Eigenschaften ihrer Eltern, UIEvent und Event.

KeyboardEvent.altKey Nur lesbar

Gibt einen booleschen Wert zurück, der true ist, wenn die Alt- (Option oder auf macOS) Taste aktiv war, als das Tastenereignis generiert wurde.

KeyboardEvent.code Nur lesbar

Gibt einen String mit dem Codewert der physischen Taste zurück, die durch das Ereignis dargestellt wird.

Warnung: Dies ignoriert das Tastaturlayout des Benutzers, sodass, wenn der Benutzer die Taste an der "Y"-Position in einem QWERTY-Tastaturlayout drückt (in der Mitte der Reihe über der Grundreihe), es immer "KeyY" zurückgibt, selbst wenn der Benutzer eine QWERTZ-Tastatur hätte (was bedeuten würde, dass der Benutzer ein "Z" erwartet und alle anderen Eigenschaften ein "Z" anzeigen würden) oder ein Dvorak-Tastaturlayout (wo der Benutzer ein "F" erwarten würde). Wenn Sie die richtigen Tastenschläge dem Benutzer anzeigen möchten, können Sie Keyboard.getLayoutMap() verwenden.

KeyboardEvent.ctrlKey Nur lesbar

Gibt einen booleschen Wert zurück, der true ist, wenn die Ctrl-Taste aktiv war, als das Tastenereignis generiert wurde.

KeyboardEvent.isComposing Nur lesbar

Gibt einen booleschen Wert zurück, der true ist, wenn das Ereignis zwischen compositionstart und compositionend ausgelöst wird.

KeyboardEvent.key Nur lesbar

Gibt einen String zurück, der den Tastenwert der durch das Ereignis dargestellten Taste repräsentiert.

KeyboardEvent.location Nur lesbar

Gibt eine Zahl zurück, die den Ort der Taste auf der Tastatur oder einem anderen Eingabegerät repräsentiert. Eine Liste der Konstanten, die die Orte identifizieren, finden Sie unter Tastaturorte.

KeyboardEvent.metaKey Nur lesbar

Gibt einen booleschen Wert zurück, der true ist, wenn die Meta-Taste (auf Mac-Tastaturen die ⌘ Command-Taste; auf Windows-Tastaturen die Windows-Taste ()) aktiv war, als das Tastenereignis generiert wurde.

KeyboardEvent.repeat Nur lesbar

Gibt einen booleschen Wert zurück, der true ist, wenn die Taste so lange gedrückt gehalten wird, dass sie sich automatisch wiederholt.

KeyboardEvent.shiftKey Nur lesbar

Gibt einen booleschen Wert zurück, der true ist, wenn die Shift-Taste aktiv war, als das Tastenereignis generiert wurde.

Beispiele

addEventListener keyup Beispiel

Dieses Beispiel protokolliert den KeyboardEvent.code-Wert, wann immer Sie eine Taste innerhalb des <input>-Elements loslassen.

html
<input placeholder="Click here, then press and release a key." size="40" />
<p id="log"></p>
js
const input = document.querySelector("input");
const log = document.getElementById("log");

input.addEventListener("keyup", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

keyup Ereignisse mit IME

Seit Firefox 65 werden die keydown und keyup Ereignisse jetzt während der Eingabemethoden-Editor-Komposition ausgelöst, um die Browser-Kompatibilität für CJKT-Benutzer zu verbessern (Firefox-Bug 354358). Um alle keyup-Ereignisse zu ignorieren, die Teil der Komposition sind, können Sie Folgendes tun:

js
eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing) {
    return;
  }
  // do something
});

Hinweis: Im Gegensatz zu keydown haben keyup-Ereignisse keine speziellen keyCode-Werte für IME-Ereignisse. Wie bei keydown kann jedoch compositionstart nach keyup ausgelöst werden, wenn das erste Zeichen eingegeben wird, das den IME öffnet, und compositionend kann vor keyup ausgelöst werden, wenn das letzte Zeichen eingegeben wird, das den IME schließt. In diesen Fällen ist isComposing false, auch wenn das Ereignis Teil der Komposition ist.

Spezifikationen

Specification
UI Events
# event-type-keyup
HTML Standard
# handler-onkeyup

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch