Element: keyup-Ereignis
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 Ereignisse keydown und keyup liefern einen Code, der angibt, welche Taste gedrückt wurde, während keypress angibt, welches Zeichen eingegeben wurde. Beispielsweise wird ein kleines „a“ von keydown und keyup als 65 gemeldet, von keypress dagegen als 97. Ein großes „A“ wird von allen Ereignissen als 65 gemeldet.
Das Ereignisziel eines Tastaturereignisses ist das aktuell fokussierte Element, das die Tastatureingabe verarbeitet. Dazu gehören <input>, <textarea>, alle Elemente, die contentEditable sind, sowie alle anderen Elemente, mit denen über die Tastatur interagiert werden kann, etwa <a>, <button> und <summary>. Wenn kein geeignetes Element fokussiert ist, ist <body> oder das Wurzelelement das Ereignisziel. Das Ereignis wird weitergereicht und kann Document und Window erreichen.
Das Ereignisziel kann sich zwischen verschiedenen Tastaturereignissen ändern. Beispielsweise unterscheidet sich beim Drücken der Tab-Taste das Ziel von keydown vom Ziel von keyup, weil sich der Fokus geändert hat.
Da das Ereignis nach dem Loslassen der Taste ausgelöst wird, geben die Eigenschaften für Modifikatortasten (ctrlKey, altKey, shiftKey und metaKey) den Zustand nach dem Loslassen wieder. Beispielsweise ist ctrlKey beim keyup-Ereignis der Control-Taste selbst false. Wird eine andere Taste losgelassen, während die Control-Taste weiterhin gedrückt ist, ist ctrlKey beim keyup-Ereignis dieser anderen Taste true.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("keyup", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onkeyup = (event) => { }
Ereignistyp
Ein KeyboardEvent. Erbt von UIEvent und Event.
Beispiele
Beispiel für keyup mit addEventListener
Dieses Beispiel protokolliert den Wert von KeyboardEvent.code, sobald 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 Ereignisse keydown und keyup auch während der Eingabe mit einem Eingabemethoden-Editor 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 dieser Eingabe sind, können Sie beispielsweise Folgendes tun:
eventTarget.addEventListener("keyup", (event) => {
if (event.isComposing) {
return;
}
// do something
});
Hinweis:
Anders als keydown haben keyup-Ereignisse keine besonderen keyCode-Werte für IME-Ereignisse. Wie bei keydown kann compositionstart jedoch nach keyup ausgelöst werden, wenn das erste Zeichen eingegeben wird, das den IME öffnet. Ebenso kann compositionend vor keyup ausgelöst werden, wenn das letzte Zeichen eingegeben wird, das den IME schließt. In diesen Fällen ist isComposing false, obwohl das Ereignis Teil der Eingabe mit dem IME ist.
Spezifikationen
| Spezifikation |
|---|
| UI Events # event-type-keyup |
| HTML # handler-onkeyup |