Element: keydown-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 keydown-Event wird ausgelöst, wenn eine Taste gedrückt wird.
Im Gegensatz zum veralteten keypress-Event wird das keydown-Event für alle Tasten ausgelöst, unabhängig davon, ob sie einen Zeichenwert erzeugen.
Die keydown- und keyup-Events liefern einen Code, der angibt, welche Taste gedrückt wurde, während keypress angibt, welches Zeichen eingegeben wurde. Zum Beispiel wird ein kleines "a" bei keydown und keyup als 65 gemeldet, aber als 97 bei keypress. Ein großes "A" wird bei allen Events als 65 gemeldet.
Das Ereignisziel eines Tastenereignisses ist das momentan 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 im Fokus ist, wird das Ereignisziel der <body> oder das Root-Element sein. Das Ereignis bubbelt. Es kann Document und Window erreichen.
Das Ereignisziel kann sich zwischen verschiedenen Tastenereignissen ändern. Zum Beispiel 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 Ereignisbehandlereigenschaft.
addEventListener("keydown", (event) => { })
onkeydown = (event) => { }
Ereignistyp
Ein KeyboardEvent. Erbt von UIEvent und Event.
Beispiele
addEventListener keydown Beispiel
Dieses Beispiel protokolliert den Wert von KeyboardEvent.code, wenn Sie eine Taste innerhalb des <input>-Elements 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-Events mit IME
Seit Firefox 65 werden die keydown- und keyup-Events nun während der Input Method Editor-Komposition ausgelöst, um die Cross-Browser-Kompatibilität für CJKT-Nutzer zu verbessern (Firefox-Bug 354358). Um alle keydown-Events zu ignorieren, die Teil einer Komposition sind, tun Sie Folgendes (229 ist ein spezieller Wert, der für ein keyCode-Ereignis festgelegt wird, das von einem IME verarbeitet wurde):
eventTarget.addEventListener("keydown", (event) => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});
Hinweis:
compositionstart kann nach keydown ausgelöst werden, wenn Sie das erste Zeichen eingeben, das den IME öffnet, und compositionend kann vor keydown 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. Dennoch bleibt KeyboardEvent.keyCode in diesen Fällen 229, daher ist es weiterhin ratsam, keyCode zu überprüfen, obwohl es veraltet ist.
Spezifikationen
| Spezifikation |
|---|
| UI Events # event-type-keydown |
| HTML # handler-onkeydown |