Element: keypress-Ereignis
Deprecated
Avoid using this feature in new projects. This feature may be a candidate for removal from web standards or browsers.
Das keypress-Ereignis wird ausgelöst, wenn eine Taste für einen Buchstaben, eine Zahl, ein Satzzeichen oder ein Symbol gedrückt wird oder wenn die Enter-Taste gedrückt wird — auch in Kombination mit der Shift- oder Ctrl-Taste. Wird hingegen eine Modifikatortaste wie Alt, Shift, Ctrl, Meta, Esc oder Option allein gedrückt, wird das keypress-Ereignis nicht ausgelöst.
Warnung:
Da dieses Ereignis veraltet ist, sollten Sie stattdessen beforeinput oder keydown verwenden.
Das Ereignis steigt im DOM-Baum auf. Es kann Document und Window erreichen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("keypress", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
onkeypress = (event) => { }
Ereignistyp
Ein KeyboardEvent. Es erbt von UIEvent und Event.
Beispiele
Beispiel für keypress mit addEventListener
Dieses Beispiel protokolliert den Wert von KeyboardEvent.code, sobald Sie nach dem Fokussieren des <input>-Elements eine Taste drücken.
Um zu sehen, welche Tasten ein keypress-Ereignis auslösen und welche nicht, drücken Sie die folgenden Tasten:
- Buchstaben-, Zahlen- und Satzzeichentasten
- Symboltasten wie $, +, =, % und +
- Modifikatortasten wie Alt, Shift, Ctrl, Meta, Esc, Option oder ⌘
- die Enter-Taste
- die Enter-Taste in Kombination mit Shift oder Ctrl
- 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}`;
}
Verwendung der Event-Handler-Eigenschaft onkeypress
Sie können auch die Event-Handler-Eigenschaft onkeypress verwenden. Beachten Sie jedoch, dass dadurch gegebenenfalls andere mit onkeypress hinzugefügte Event-Listener ersetzt werden:
input.onkeypress = logKey;
Spezifikationen
| Spezifikation |
|---|
| UI Events # event-type-keypress |
| HTML # handler-onkeypress |