Element: keypress event
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 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- oder Ctrl-Taste gedrückt wird. Wenn hingegen 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 bubbelt. Es kann Document und Window erreichen.
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.
Beispiele
Beispiel mit addEventListener keypress
Dieses Beispiel protokolliert den Wert von KeyboardEvent.code, wann immer Sie nach dem Fokussieren des <input>-Elements eine Taste 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 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
| Spezifikation |
|---|
| UI Events # event-type-keypress |
| HTML # handler-onkeypress |