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 July 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 liefern einen Code, der angibt, welche Taste gedrückt wurde, während keypress angibt, welches Zeichen eingegeben wurde. Zum Beispiel wird ein kleines "a" sowohl durch keydown als auch keyup als 65 gemeldet, aber als 97 durch keypress. Ein großes "A" wird durch alle Ereignisse als 65 gemeldet.

Das Ereignisziel eines Tastenereignisses ist das gerade fokussierte Element, das die Tastaturaktivität verarbeitet. Dazu gehören: <input>, <textarea>, alles, was contentEditable ist, und alles andere, mit dem man über die Tastatur interagieren kann, wie <a>, <button> und <summary>. Wenn kein geeignetes Element fokussiert ist, wird das Ereignisziel der <body> oder das Root-Element sein. Das Ereignis bläst sich auf. 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, weil sich der Fokus geändert hat.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignisbehandlereigenschaft.

js
addEventListener("keydown", (event) => {});

onkeydown = (event) => {};

Ereignistyp

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-Taste (Option oder auf macOS) aktiv war, als das Tastenereignis erzeugt wurde.

KeyboardEvent.code Schreibgeschützt

Gibt eine Zeichenkette mit dem Codewert der physikalischen Taste zurück, die durch das Ereignis dargestellt wird.

Warnung: Dies ignoriert das Tastaturlayout des Benutzers, so dass, 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, auch 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 ein Dvorak-Tastaturlayout (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.ctrlKey Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn die Ctrl-Taste aktiv war, als das Tastenereignis erzeugt wurde.

KeyboardEvent.isComposing Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn das Ereignis zwischen compositionstart und compositionend ausgelöst wird.

KeyboardEvent.key Schreibgeschützt

Gibt eine Zeichenkette zurück, die den Tastenwert der durch das Ereignis dargestellten Taste repräsentiert.

KeyboardEvent.location Schreibgeschü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 Positionen identifizieren, wird in Keyboard locations 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 Tastenereignis erzeugt wurde.

KeyboardEvent.repeat Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn die Taste so lange gedrückt wird, dass sie sich automatisch wiederholt.

KeyboardEvent.shiftKey Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn die Shift-Taste aktiv war, als das Tastenereignis erzeugt wurde.

Beispiele

addEventListener keydown Beispiel

Dieses Beispiel protokolliert den KeyboardEvent.code-Wert, wann immer Sie eine Taste innerhalb des <input>-Elements drücken.

html
<input placeholder="Click here, then press down a key." size="40" />
<p id="log"></p>
js
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 während der Eingabemethoden-Editor-Zusammensetzung 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, können Sie etwas in der Art tun (229 ist ein spezieller Wert, der für einen keyCode festgelegt wird, der sich auf ein Ereignis bezieht, das von einem IME verarbeitet wurde):

js
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. Dennoch bleibt KeyboardEvent.keyCode in diesen Fällen 229, also ist es weiterhin ratsam, keyCode ebenfalls zu überprüfen, obwohl es veraltet ist.

Spezifikationen

Specification
UI Events
# event-type-keydown
HTML
# handler-onkeydown

Browser-Kompatibilität

Siehe auch