Element: keyup-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Die Ereignisse keydown und keyup liefern einen Code, der angibt, welche Taste gedrückt wurde, 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 Tastaturereignisses ist das derzeit fokussierte Element, das die Tastaturaktivität verarbeitet. Dies umfasst: <input>, <textarea>, alles, was contentEditable ist, und alles andere, das mit der Tastatur interagieren kann, wie <a>, <button>, und <summary>. Wenn kein geeignetes Element im Fokus ist, wird das Ereignisziel der <body> oder die Wurzel sein. Das Ereignis blubbert nach oben. Es kann Document und Window erreichen.

Das Ereignisziel kann zwischen verschiedenen Tastenereignissen wechseln. Zum Beispiel ist 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 Ereignishandler-Eigenschaft.

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

onkeyup = (event) => { }

Ereignistyp

Ereigniseigenschaften

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

KeyboardEvent.altKey Schreibgeschützt

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

KeyboardEvent.code Schreibgeschützt

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

Warnung: Dies ignoriert das Tastaturlayout des Benutzers. Wenn der Benutzer die Taste an der "Y"-Position in einem QWERTY-Tastaturlayout drückt (nahe der Mitte der Reihe oberhalb der Grundreihe), wird dies immer "KeyY" zurückgeben, auch wenn der Benutzer eine QWERTZ-Tastatur hat (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 dem Benutzer die korrekten Tastenschläge anzeigen möchten, können Sie Keyboard.getLayoutMap() verwenden.

KeyboardEvent.ctrlKey Schreibgeschützt

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

KeyboardEvent.isComposing Schreibgeschützt

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

KeyboardEvent.key Schreibgeschützt

Gibt eine Zeichenfolge zurück, die den Wert der Taste darstellt, die durch das Ereignis repräsentiert wird.

KeyboardEvent.location Schreibgeschützt

Gibt eine Zahl zurück, die die Position der Taste auf der Tastatur oder einem anderen Eingabegerät darstellt. Eine Liste der Konstanten, die die Positionen identifizieren, wird unter Keyboard locations dargestellt.

KeyboardEvent.metaKey Schreibgeschützt

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 Tastaturereignis generiert wurde.

KeyboardEvent.repeat Schreibgeschützt

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

KeyboardEvent.shiftKey Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn die Shift Taste aktiv war, als das Tastaturereignis 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 Ereignisse keydown und keyup nun während der Input method 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, tun Sie Folgendes:

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

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

Spezifikationen

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

Browser-Kompatibilität

Siehe auch