Element: keypress event
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 Symbol-Taste 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 die Alt-, Shift-, Ctrl-, Meta-, Esc- oder Option-Taste alleine gedrückt wird, wird das keypress-Ereignis nicht ausgelöst.
Warnung:
Da dieses Ereignis veraltet ist, sollten Sie stattdessen beforeinput oder keydown verwenden.
Das Ereignis blubbert. Es kann Document und Window erreichen.
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.altKeySchreibgeschützt-
Gibt einen booleschen Wert zurück, der
trueist, wenn die Alt-Taste (Option oder ⌥ auf macOS) aktiv war, als das Tastenereignis generiert wurde. KeyboardEvent.codeSchreibgeschützt-
Gibt einen String mit dem Codewert der physischen Taste zurück, die durch das Ereignis repräsentiert wird.
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 Tastwert der durch das Ereignis repräsentierten Taste angibt.
KeyboardEvent.locationSchreibgeschü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.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 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 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
| Specification |
|---|
| UI Events> # event-type-keypress> |
| HTML> # handler-onkeypress> |
Browser-Kompatibilität
Loading…