Element: keyup event
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 liefern einen Code, der angibt, welche Taste gedrückt wurde, während keypress
angibt, welches Zeichen eingegeben wurde. Zum Beispiel wird ein kleines "a" durch keydown
und keyup
als 65 gemeldet, aber durch keypress
als 97. Ein großes "A" wird in allen Ereignissen als 65 gemeldet.
Das Ereignistarget eines Tastaturereignisses ist das aktuell fokussierte Element, das die Tastatureingabe verarbeitet. Dazu gehören: <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 Ereignistarget der <body>
oder der Root. Wenn es nicht abgefangen wird, bubbelt das Ereignis den DOM-Baum hinauf bis zum Document
.
Das Ereignistarget kann sich zwischen verschiedenen Tastaturereignissen ändern. Zum Beispiel wäre das keydown
-Target beim Drücken der Tab-Taste anders als das keyup
-Target, da sich der Fokus verä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
.
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-Taste (Option oder ⌥ auf macOS) aktiv war, als das Tastaturereignis erzeugt wurde. KeyboardEvent.code
Schreibgeschützt-
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 Heimatreihe), dies immer "KeyY" zurückgibt, 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 Tastenanschlä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 erzeugt 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 Tastenwert der durch das Ereignis dargestellten Taste wiedergibt.
KeyboardEvent.location
Schreibgeschützt-
Gibt eine Zahl zurück, die den Ort der Taste auf der Tastatur oder einem anderen Eingabegerät darstellt. Eine Liste der Konstanten, die die Standorte identifizieren, ist in Tastaturorte zu sehen.
KeyboardEvent.metaKey
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Meta-Taste (auf Mac-Tastaturen die ⌘ Befehl-Taste; auf Windows-Tastaturen die Windows-Taste (⊞)) aktiv war, als das Tastaturereignis erzeugt wurde. KeyboardEvent.repeat
Schreibgeschützt-
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
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Shift-Taste aktiv war, als das Tastaturereignis erzeugt wurde.
Beispiele
addEventListener keyup Beispiel
Dieses Beispiel protokolliert den KeyboardEvent.code
-Wert, wann immer 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 während der Eingabemethoden-Editor-Komposition ausgelöst, um die Browser-Kompatibilität für CJKT-Benutzer zu verbessern (Firefox-Fehler 354358). Um alle keyup
-Ereignisse zu ignorieren, die Teil einer Komposition sind, verwenden Sie etwas wie dies:
eventTarget.addEventListener("keyup", (event) => {
if (event.isComposing) {
return;
}
// do something
});
Hinweis:
Anders als keydown
haben keyup
-Ereignisse keine speziellen keyCode
-Werte für IME-Ereignisse. Allerdings kann wie bei keydown
das compositionstart
nach keyup
ausgelöst werden, wenn das erste Zeichen eingegeben wird, das das IME öffnet, und compositionend
kann vor keyup
ausgelöst werden, wenn das letzte Zeichen eingegeben wird, dass das IME schließt. In diesen Fällen ist isComposing
falsch, selbst wenn das Ereignis Teil einer Komposition ist.
Spezifikationen
Specification |
---|
UI Events # event-type-keyup |
HTML Standard # handler-onkeyup |
Browser-Kompatibilität
BCD tables only load in the browser