Element: keydown-Ereignis
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Das keydown-Ereignis wird ausgelöst, wenn eine Taste gedrückt wird.
Im Gegensatz zum veralteten keypress-Ereignis wird das keydown-Ereignis für alle Tasten ausgelöst, unabhängig davon, ob sie einen Zeichenwert erzeugen.
Die keydown- und keyup-Ereignisse geben einen Code an, der angibt, welche Taste gedrückt wurde, während keypress angibt, welches Zeichen eingegeben wurde. Zum Beispiel wird ein kleines "a" als 65 durch keydown und keyup gemeldet, aber als 97 durch keypress. 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, das 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, 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 unterschiedlich zum keyup-Ziel, da sich der Fokus geändert hat.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("keydown", (event) => { })
onkeydown = (event) => { }
Ereignistyp
Ein KeyboardEvent. Erbt von UIEvent und Event.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften von ihren Eltern, UIEvent und Event.
KeyboardEvent.altKeySchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Alt (Option oder ⌥ auf macOS) Taste aktiv war, als das Tastenereignis generiert wurde. KeyboardEvent.codeSchreibgeschützt-
Gibt einen String mit dem Code-Wert der physikalischen Taste zurück, die durch das Ereignis repräsentiert wird.
Warnung: Dies ignoriert die Tastaturbelegung des Benutzers, sodass, wenn der Benutzer die Taste an der "Y"-Position in einer QWERTY-Tastaturbelegung drückt (in der Nähe der Mitte der Reihe über der Home-Row), dies immer "KeyY" zurückgeben wird, selbst wenn der Benutzer eine QWERTZ-Tastatur hat (was bedeuten würde, dass der Benutzer ein "Z" erwartet und alle anderen Eigenschaften ein "Z" anzeigen würden) oder eine Dvorak-Tastaturbelegung (wo der Benutzer ein "F" erwarten würde). Wenn Sie dem Benutzer die korrekten Tastenanschläge anzeigen möchten, können Sie
Keyboard.getLayoutMap()verwenden. KeyboardEvent.ctrlKeySchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Ctrl-Taste aktiv war, als das Tastenereignis generiert wurde. KeyboardEvent.isComposingSchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn das Ereignis zwischencompositionstartundcompositionendausgelöst wird. KeyboardEvent.keySchreibgeschützt-
Gibt einen String zurück, der den Tastaturwert der durch das Ereignis repräsentierten Taste darstellt.
KeyboardEvent.locationSchreibgeschützt-
Gibt eine Zahl zurück, die den Ort der Taste auf der Tastatur oder einem anderen Eingabegerät darstellt. Eine Liste der Konstanten, die die Orte identifizieren, wird unter Tastaturorte angezeigt.
KeyboardEvent.metaKeySchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Meta-Taste (auf Mac-Tastaturen die ⌘ Command-Taste; auf Windows-Tastaturen die Windows-Taste (⊞)) aktiv war, als das Tastenereignis generiert wurde. KeyboardEvent.repeatSchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Taste so lange gedrückt gehalten wird, dass sie automatisch wiederholt wird. KeyboardEvent.shiftKeySchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Shift-Taste aktiv war, als das Tastenereignis generiert wurde.
Beispiele
>addEventListener keydown-Beispiel
Dieses Beispiel protokolliert den Wert KeyboardEvent.code, wann immer Sie eine Taste im <input>-Element 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 keydown- und keyup-Ereignisse nun während der Eingabemethoden-Editor-Kompilation ausgelöst, um die Kompatibilität zwischen verschiedenen Browsern für CJKT-Nutzer zu verbessern (Firefox-Bug 354358). Um alle keydown-Ereignisse, die Teil der Komposition sind, zu ignorieren, können Sie etwas wie folgt tun (229 ist ein spezieller Wert, der für einen keyCode gesetzt wird, der sich auf ein von einem IME verarbeitetes Ereignis bezieht):
eventTarget.addEventListener("keydown", (event) => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});
Hinweis:
compositionstart kann nach keydown ausgelöst werden, wenn das erste Zeichen eingegeben wird, das das IME öffnet, und compositionend kann vor keydown ausgelöst werden, wenn das letzte Zeichen eingegeben wird, das das IME schließt. In diesen Fällen ist isComposing falsch, auch wenn das Ereignis Teil der Komposition ist. KeyboardEvent.keyCode ist in diesen Fällen jedoch immer noch 229, daher ist es immer noch ratsam, keyCode ebenfalls zu überprüfen, obwohl es veraltet ist.
Spezifikationen
| Specification |
|---|
| UI Events> # event-type-keydown> |
| HTML> # handler-onkeydown> |
Browser-Kompatibilität
Loading…