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 Juli 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 wird, während keypress angibt, welches Zeichen eingegeben wurde. Zum Beispiel wird ein kleines "a" sowohl von keydown als auch von keyup als 65 gemeldet, aber als 97 von keypress. Ein großes "A" wird von allen Ereignissen als 65 gemeldet.
Das Ziel des Tastaturereignisses ist das aktuell fokussierte Element, das die Tastaturaktivität verarbeitet. Dazu gehören: <input>, <textarea>, alles was contentEditable ist, und alles, was über die Tastatur interagiert werden kann, wie <a>, <button>, und <summary>. Wenn kein geeignetes Element im Fokus ist, wird das Ziel des Ereignisses der <body> oder der Root. Das Ereignis bubbelt. Es kann Document und Window erreichen.
Das Ereignisziel kann zwischen verschiedenen Tastaturereignissen wechseln. Zum Beispiel wird das keydown-Ziel beim Drücken der Tab-Taste anders sein als das keyup-Ziel, da sich der Fokus geändert hat.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder legen Sie eine Event-Handler-Eigenschaft fest.
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.altKeySchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Alt (Option oder ⌥ auf macOS) Taste aktiv war, als das Tastaturereignis generiert wurde. KeyboardEvent.codeSchreibgeschützt-
Gibt einen String mit dem Code-Wert der physischen Taste zurück, die durch das Ereignis dargestellt wird.
Warnung: Dies ignoriert das Tastaturlayout des Benutzers, so dass, wenn der Benutzer die Taste an der "Y"-Position in einem QWERTY-Tastaturlayout drückt (nahe der Mitte der Reihe über der Grundreihe), immer "KeyY" zurückgegeben wird, selbst 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.ctrlKeySchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Ctrl-Taste aktiv war, als das Tastaturereignis generiert wurde. KeyboardEvent.isComposingSchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn das Ereignis zwischencompositionstartund vorcompositionendausgelöst wird. KeyboardEvent.keySchreibgeschützt-
Gibt einen String zurück, der den Tastenwert der durch das Ereignis dargestellten Taste repräsentiert.
KeyboardEvent.locationSchreibgeschützt-
Gibt eine Zahl zurück, die den Standort der Taste auf der Tastatur oder einem anderen Eingabegerät darstellt. Eine Liste der Konstanten, die die Standorte identifizieren, wird in Tastaturlayouts gezeigt.
KeyboardEvent.metaKeySchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Meta-Taste (auf Mac-Tastaturen die ⌘ Command-Taste; auf Windows-Tastaturen die Windows-Taste (⊞)) aktiv war, als das Tastaturereignis generiert wurde. KeyboardEvent.repeatSchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Taste so lange gehalten wird, dass sie automatisch wiederholt wird. KeyboardEvent.shiftKeySchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Shift-Taste aktiv war, als das Tastaturereignis generiert wurde.
Beispiele
>Beispiel zur Verwendung von addEventListener mit keyup
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 nun während der Eingabemethode-Editor-Komposition ausgelöst, um die Browser-Kompatibilität für CJKT-Nutzer zu verbessern (Firefox Bug 354358). Um alle keyup-Ereignisse zu ignorieren, die Teil der Komposition sind, tun Sie Folgendes:
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. 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 auftreten, 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> # handler-onkeyup> |
Browser-Kompatibilität
Loading…