Element: keypress event

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.

addEventListener("keypress", (event) => { })

onkeypress = (event) => { }

Ereignistyp

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

KeyboardEvent.code Schreibgeschützt

Gibt einen String mit dem Codewert der physischen Taste zurück, die durch das Ereignis repräsentiert wird.

KeyboardEvent.ctrlKey Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn die Ctrl-Taste aktiv war, als das Tastenereignis generiert 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 einen String zurück, der den Tastwert der durch das Ereignis repräsentierten Taste angibt.

KeyboardEvent.location Schreibgeschützt

Gibt eine Zahl zurück, die den Speicherort der Taste auf der Tastatur oder einem anderen Eingabegerät angibt. Eine Liste der Konstanten, die die Speicherorte identifizieren, ist unter Tastatur-Speicherorte zu sehen.

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 generiert wurde.

KeyboardEvent.repeat Schreibgeschützt

Gibt einen booleschen Wert zurück, der true ist, wenn die Taste so gedrückt gehalten wird, dass 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 Tastenereignis generiert wurde.

Beispiele

addEventListener keypress Beispiel

Dieses Beispiel protokolliert den KeyboardEvent.code-Wert, wenn immer Sie eine Taste nach dem Fokussieren des <input>-Elements drücken.

Um zu sehen, welche Tasten ein keypress-Ereignis auslösen und welche nicht, versuchen Sie, die folgenden Tasten zu drücken:

• Buchstabentasten, Zahlentasten und Satzzeichentasten
• Symboltasten wie die $-, +-, =-, %- und +-Tasten
• Modifikatortasten wie die Alt-, Shift-, Ctrl-, Meta-, Esc-, Option- oder ⌘-Tasten
• die Enter-Taste
• die Enter-Taste in Kombination mit der Shift- oder Ctrl-Taste
• die Enter-Taste in Kombination mit anderen Modifikatortasten außer der Shift- oder Ctrl-Taste

<div>
  <label for="sample">Focus the input and type something:</label>
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>

const log = document.getElementById("log");
const input = document.querySelector("input");

input.addEventListener("keypress", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

Gleichwertiges onkeypress

input.onkeypress = logKey;

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Document-Schnittstelle, die das Ereignis ebenfalls anvisiert.
• Verwandte Ereignisse:
  • input
  • keydown
  • keyup