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 Taste Enter gedrückt wird – auch in Kombination mit Shift oder Ctrl. Wird dagegen eine Modifizierertaste 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-Property 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, wenn 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 beispielsweise:
- Buchstaben-, Zahlen- und Satzzeichentasten
- Symboltasten wie $, +, =, % und +
- Modifizierertasten wie Alt, Shift, Ctrl, Meta, Esc, Option oder ⌘
- die Taste Enter
- die Taste Enter in Kombination mit Shift oder Ctrl
- die Taste Enter in Kombination mit anderen Modifizierertasten 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-Property onkeypress
Sie können auch die Event-Handler-Property 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 |