Element: keyup event
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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" sowohl bei keydown als auch bei keyup als 65 gemeldet, aber als 97 bei keypress. Ein großes "A" wird von allen Ereignissen als 65 gemeldet.
Das Ziel eines Tastaturereignisses ist das derzeit fokussierte Element, das die Tastaturaktivität verarbeitet. Dazu gehören: <input>, <textarea>, alles, was contentEditable ist, und alles andere, was mit der Tastatur interagiert werden kann, wie <a>, <button>, und <summary>. Wenn kein geeignetes Element fokussiert ist, ist das Ereignisziel der <body> oder die Wurzel. Das Ereignis bubbles. Es kann Document und Window erreichen.
Das Ereignisziel kann zwischen verschiedenen Tastaturereignissen wechseln. Wenn zum Beispiel die Tab-Taste gedrückt wird, unterscheidet sich das keydown-Ziel vom keyup-Ziel, weil sich der Fokus geändert hat.
Da das Ereignis ausgelöst wird, nachdem die Taste losgelassen wurde, reflektieren die Modifiziertasten-Eigenschaften (ctrlKey, altKey, shiftKey und metaKey) den Zustand nach dem Loslassen. Zum Beispiel ist ctrlKey bei einem keyup-Ereignis für die Control-Taste selbst false. Wenn eine andere Taste losgelassen wird, während die Control-Taste weiterhin gedrückt bleibt, ist ctrlKey für das keyup-Ereignis dieser Taste true.
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.
Beispiele
addEventListener keyup Beispiel
Dieses Beispiel protokolliert den Wert von KeyboardEvent.code, wenn Sie eine Taste im <input>-Element 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 Kompatibilität zwischen Browsern für CJKT-Benutzer 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 haben keyup-Ereignisse keine speziellen keyCode Werte für IME-Ereignisse. Jedoch, wie bei keydown, kann 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 falsch, selbst wenn das Ereignis Teil der Komposition ist.
Spezifikationen
| Spezifikation |
|---|
| UI Events # event-type-keyup |
| HTML # handler-onkeyup |