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 keydown
- und keyup
-Ereignisse geben einen Code an, der angibt, welche Taste gedrückt wurde, während keypress
angibt, welcher Buchstabe eingegeben wurde. Zum Beispiel wird ein kleines "a" als 65 von keydown
und keyup
, aber als 97 von keypress
gemeldet. Ein großes "A" wird von allen Ereignissen als 65 gemeldet.
Das Zielobjekt eines Tastenereignisses ist das aktuell fokussierte Element, das die Tastaturaktivität verarbeitet. Dazu gehören: <input>
, <textarea>
, alles, was contentEditable
ist, und alles andere, mit dem über die Tastatur interagiert werden kann, wie z. B. <a>
, <button>
und <summary>
. Falls kein geeignetes Element fokussiert ist, wird das Ereignisziel das <body>
oder die Wurzel sein. Das Ereignis bubbelt. Es kann Document
und Window
erreichen.
Das Zielobjekt des Ereignisses kann sich zwischen verschiedenen Tastaturereignissen ändern. Zum Beispiel wird das keydown
-Ziel beim Drücken der Taste Tab unterschiedlich sein im Vergleich zum keyup
-Ziel, da sich der Fokus geändert hat.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
, oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("keyup", (event) => {});
onkeyup = (event) => {};
Ereignistyp
Ein KeyboardEvent
. Erbt von UIEvent
und Event
.
Eigenschaften des Ereignisses
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-Taste (Option oder ⌥ auf macOS) aktiv war, als das Tastenereignis generiert wurde. KeyboardEvent.code
Schreibgeschützt-
Gibt einen String mit dem Code-Wert der physischen Taste zurück, die durch das Ereignis repräsentiert wird.
Warnung: Dies ignoriert das Tastaturlayout des Benutzers, sodass, wenn der Benutzer die Taste an der "Y"-Position auf einem QWERTY-Tastaturlayout drückt (nahe der Mitte der Reihe oberhalb der Hauptreihe), immer "KeyY" zurückgegeben wird, selbst wenn der Benutzer eine QWERTZ-Tastatur verwendet (was bedeutet, dass der Benutzer ein "Z" erwartet und alle anderen Eigenschaften ein "Z" anzeigen würden) oder ein Dvorak-Tastaturlayout, bei dem der Benutzer ein "F" erwartet. Wenn Sie die korrekten Tastenanschläge für den Benutzer 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 Tastenereignis generiert wurde. KeyboardEvent.isComposing
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn das Ereignis zwischencompositionstart
undcompositionend
ausgelöst wird. KeyboardEvent.key
Schreibgeschützt-
Gibt einen String zurück, der den Wert der Taste repräsentiert, die durch das Ereignis dargestellt wird.
KeyboardEvent.location
Schreibgeschützt-
Gibt eine Nummer 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 gezeigt.
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 Tastenereignis generiert wurde. KeyboardEvent.repeat
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Taste gedrückt gehalten wird und dadurch automatisch wiederholt wird. KeyboardEvent.shiftKey
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Shift-Taste aktiv war, als das Tastenereignis generiert wurde.
Beispiele
Beispiel für addEventListener mit keyup
Dieses Beispiel protokolliert den Wert von KeyboardEvent.code
, wenn Sie eine Taste innerhalb des <input>
-Elements loslassen.
<input placeholder="Click here, then press and release a key." size="40" />
<p id="log"></p>
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 nun während der Input Method Editor-Zusammensetzung ausgelöst, um die Kompatibilität zwischen Browsern für CJKT-Benutzer zu verbessern (Firefox-Bug 354358). Um alle keyup
-Ereignisse zu ignorieren, die Teil der Zusammensetzung sind, tun Sie Folgendes:
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 getippt wird, das den IME öffnet, und compositionend
kann vor keyup
ausgelöst werden, wenn das letzte Zeichen getippt wird, das den IME schließt. In diesen Fällen ist isComposing
false, auch wenn das Ereignis Teil der Zusammensetzung ist.
Spezifikationen
Specification |
---|
UI Events # event-type-keyup |
HTML # handler-onkeyup |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
keyup event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support