Element: keydown-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 keydown-Ereignis wird ausgelöst, wenn eine Taste gedrückt wird.
Anders als das veraltete keypress-Ereignis wird das keydown-Ereignis für alle Tasten ausgelöst, unabhängig davon, ob sie ein Zeichen erzeugen.
Die Ereignisse keydown und keyup liefern einen Code, der angibt, welche Taste gedrückt wurde. keypress gibt dagegen an, welches Zeichen eingegeben wurde. Beispielsweise wird ein kleines „a“ von keydown und keyup als 65 gemeldet, von keypress jedoch als 97. Ein großes „A“ wird von allen Ereignissen als 65 gemeldet.
Das Ereignisziel eines Tastaturereignisses ist das Element, das aktuell den Fokus hat und die Tastatureingabe verarbeitet. Dazu gehören <input>, <textarea>, alle Elemente, die contentEditable sind, sowie andere Elemente, mit denen über die Tastatur interagiert werden kann, etwa <a>, <button> und <summary>. Wenn kein geeignetes Element den Fokus hat, ist <body> oder das Wurzelelement das Ereignisziel. Das Ereignis steigt im DOM-Baum auf. Es kann Document und Window erreichen.
Das Ereignisziel kann sich zwischen verschiedenen Tastaturereignissen ändern. Wenn beispielsweise die Tab-Taste gedrückt wird, unterscheidet sich das Ziel von keydown vom Ziel von keyup, weil sich der Fokus geändert hat.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("keydown", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onkeydown = (event) => { }
Ereignistyp
Ein KeyboardEvent. Erbt von UIEvent und Event.
Beispiele
Beispiel für keydown mit addEventListener
Dieses Beispiel protokolliert den Wert von KeyboardEvent.code, sobald Sie innerhalb des <input>-Elements eine Taste drücken.
<input placeholder="Click here, then press down a key." size="40" />
<p id="log"></p>
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("keydown", logKey);
function logKey(e) {
log.textContent += ` ${e.code}`;
}
keydown-Ereignisse mit IME
Seit Firefox 65 werden die Ereignisse keydown und keyup auch während der Eingabe mit einem Eingabemethodeneditor ausgelöst, um die browserübergreifende Kompatibilität für CJKT-Benutzer zu verbessern (Firefox-Bug 354358). Um alle keydown-Ereignisse zu ignorieren, die Teil dieser Eingabe sind, können Sie wie folgt vorgehen (229 ist ein spezieller Wert für keyCode bei einem Ereignis, das von einem IME verarbeitet wurde):
eventTarget.addEventListener("keydown", (event) => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});
Hinweis:
compositionstart kann beim Eingeben des ersten Zeichens, das den IME öffnet, nach keydown ausgelöst werden. Ebenso kann compositionend beim Eingeben des letzten Zeichens, das den IME schließt, vor keydown ausgelöst werden. In diesen Fällen ist isComposing false, obwohl das Ereignis Teil der Eingabe mit dem IME ist. KeyboardEvent.keyCode hat in diesen Fällen jedoch weiterhin den Wert 229. Daher ist es ratsam, zusätzlich keyCode zu prüfen, obwohl es veraltet ist.
Spezifikationen
| Spezifikation |
|---|
| UI Events # event-type-keydown |
| HTML # handler-onkeydown |