Element: keydown Event
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 geben einen Code an, welcher Schlüssel gedrückt wird, während keypress
angibt, welches Zeichen eingegeben wurde. Zum Beispiel wird ein kleines "a" von keydown
und keyup
als 65 gemeldet, aber von keypress
als 97. Ein großes "A" wird von allen Events als 65 gemeldet.
Das Eventziel eines Tasten-Events ist das derzeit fokussierte Element, das die Tastaturaktivität verarbeitet. Dazu gehören: <input>
, <textarea>
, alles, was contentEditable
ist, und alles andere, das mit der Tastatur interagiert werden kann, wie <a>
, <button>
und <summary>
. Wenn kein geeignetes Element im Fokus ist, wird das Eventziel der <body>
oder der Root. Wenn es nicht abgefangen wird, blubbert das Event den DOM-Baum hinauf, bis es Document
erreicht.
Das Eventziel kann zwischen verschiedenen Tasten-Events wechseln. Zum Beispiel wäre das keydown
-Ziel beim Drücken der Tab-Taste ein anderes als das keyup
-Ziel, weil sich der Fokus geändert hat.
Syntax
Nutzen Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("keydown", (event) => {});
onkeydown = (event) => {};
Eventtyp
Ein KeyboardEvent
. Erbt von UIEvent
und Event
.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften ihrer Eltern, UIEvent
und Event
.
KeyboardEvent.altKey
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Alt (Option oder ⌥ auf macOS) Taste aktiv war, als das Tasten-Event generiert wurde. KeyboardEvent.code
Schreibgeschützt-
Gibt einen String mit dem Code-Wert der physischen Taste zurück, die durch das Event repräsentiert wird.
Warnung: Dies ignoriert die Tastaturbelegung des Benutzers, sodass, wenn der Benutzer die Taste an der "Y"-Position in einem QWERTY-Tastaturlayout drückt (nahe der Mitte der Reihe über der Grundreihe), dies immer "KeyY" zurückgibt, selbst wenn der Benutzer eine QWERTZ-Tastatur hat (was bedeutet, 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 die korrekten Tastenanschläge für den Benutzer anzeigen möchten, können Sie
Keyboard.getLayoutMap()
verwenden. KeyboardEvent.ctrlKey
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Ctrl Taste aktiv war, als das Tasten-Event generiert wurde. KeyboardEvent.isComposing
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn das Event zwischencompositionstart
undcompositionend
ausgelöst wird. KeyboardEvent.key
Schreibgeschützt-
Gibt einen String zurück, der den Tastenwert der durch das Event repräsentierten Taste darstellt.
KeyboardEvent.location
Schreibgeschützt-
Gibt eine Zahl zurück, die die Position der Taste auf der Tastatur oder einem anderen Eingabegerät darstellt. Eine Liste der Konstanten, die die Positionen identifizieren, wird in Tastaturlocations angezeigt.
KeyboardEvent.metaKey
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Meta Taste (auf Mac-Tastaturen, die ⌘ Command Taste; auf Windows-Tastaturen, die Windows-Taste (⊞)) aktiv war, als das Tasten-Event generiert wurde. KeyboardEvent.repeat
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Taste gedrückt gehalten wird, sodass sie automatisch wiederholt wird. KeyboardEvent.shiftKey
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Shift Taste aktiv war, als das Tasten-Event generiert wurde.
Beispiele
Beispiel für addEventListener keydown
Dieses Beispiel protokolliert den KeyboardEvent.code
-Wert, wann immer 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-Ereignisse mit IME
Seit Firefox 65 werden die keydown
- und keyup
-Ereignisse nun während der IME-Komposition ausgelöst, um die Browser-Kompatibilität für CJKT-Benutzer zu verbessern (Firefox-Bug 354358). Um alle keydown
-Ereignisse zu ignorieren, die Teil der Komposition sind, machen Sie etwas wie dies (229 ist ein spezieller Wert, der für einen keyCode
gesetzt wird, der sich auf ein Ereignis bezieht, 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 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
auch dann falsch, wenn das Ereignis Teil der Komposition ist. KeyboardEvent.keyCode
ist jedoch in diesen Fällen immer noch 229
, daher ist es dennoch ratsam, auch keyCode
zu überprüfen, obwohl es veraltet ist.
Spezifikationen
Specification |
---|
UI Events # event-type-keydown |
HTML Standard # handler-onkeydown |
Browser-Kompatibilität
BCD tables only load in the browser