Element: keypress-Ereignis
Veraltet: Diese Funktion wird nicht mehr empfohlen. Obwohl einige Browser sie möglicherweise noch unterstützen, könnte sie bereits aus den relevanten Webstandards entfernt worden sein, in Kürze entfernt werden oder nur noch aus Kompatibilitätsgründen bestehen. Vermeiden Sie die Verwendung und aktualisieren Sie vorhandenen Code, falls möglich; siehe die Kompatibilitätstabelle am Ende dieser Seite, um Ihre Entscheidung zu unterstützen. Beachten Sie, dass diese Funktion jederzeit aufhören könnte zu funktionieren.
Das keypress
-Ereignis wird ausgelöst, wenn eine Buchstaben-, Zahlen-, Satzzeichen- oder Symboltaste gedrückt wird oder wenn die Enter-Taste gedrückt wird — einschließlich, wenn die Enter-Taste in Kombination mit der Shift-Taste oder der Ctrl-Taste gedrückt wird. Ansonsten, wenn eine Modifikatortaste wie Alt, Shift, Ctrl, Meta, Esc oder Option isoliert gedrückt wird, wird das keypress
-Ereignis nicht ausgelöst.
Warnung:
Da dieses Ereignis als veraltet markiert wurde, sollten Sie stattdessen beforeinput
oder keydown
verwenden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-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 Code-Wert der physischen Taste zurück, die durch das Ereignis dargestellt 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 zwischencompositionstart
und bevorcompositionend
ausgelöst wird. KeyboardEvent.key
Schreibgeschützt-
Gibt einen String zurück, der den Tastenwert der Taste repräsentiert, die durch das Ereignis dargestellt wird.
KeyboardEvent.location
Schreibgeschützt-
Gibt eine Zahl zurück, die den Standort der Taste auf der Tastatur oder einem anderen Eingabegerät repräsentiert. Eine Liste der Konstanten, die die Standorte 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 generiert wurde. KeyboardEvent.repeat
Schreibgeschützt-
Gibt einen booleschen Wert zurück, der
true
ist, wenn die Taste so lange gedrückt 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
Beispiel für addEventListener keypress
Dieses Beispiel protokolliert den KeyboardEvent.code
-Wert, wann immer Sie nach Fokussierung des <input>
-Elements eine Taste drücken.
Um zu sehen, welche Tasten ein keypress
-Ereignis auslösen und welche nicht, versuchen Sie, folgende 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 den Shift- oder Ctrl-Tasten
- die Enter-Taste in Kombination mit anderen Modifikatortasten als Shift oder Ctrl
<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}`;
}
Äquivalent zu onkeypress
input.onkeypress = logKey;
Spezifikationen
Specification |
---|
UI Events # event-type-keypress |
HTML # handler-onkeypress |
Browser-Kompatibilität
BCD tables only load in the browser