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 anzeigt, welche Taste gedrückt wird, während keypress angibt, welches Zeichen eingegeben wurde. Beispielsweise 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 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 zum Beispiel <a>, <button> und <summary>. Wenn kein geeignetes Element fokussiert ist, ist das Ereignisziel der <body> oder die Wurzel. Das Ereignis bubbelt. Es kann Document und Window erreichen.
Das Ereignisziel kann zwischen verschiedenen Tastenereignissen wechseln. Beispielsweise wäre das keydown-Ziel beim 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.
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, 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 jetzt während der Input Method Editor-Komposition ausgelöst, um die browserübergreifende Kompatibilität für CJKT-Benutzer zu verbessern (Firefox-Bug 354358). Um alle keyup-Ereignisse zu ignorieren, die Teil der Komposition sind, machen 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. Ähnlich wie bei keydown kann jedoch compositionstart nach keyup ausgelöst werden, wenn Sie das erste Zeichen eingeben, das den IME öffnet, und compositionend kann vor keyup ausgelöst werden, wenn Sie das letzte Zeichen eingeben, das den IME schließt. In diesen Fällen ist isComposing falsch, auch wenn das Ereignis Teil der Komposition ist.
Spezifikationen
| Spezifikation |
|---|
| UI Events # event-type-keyup |
| HTML # handler-onkeyup |