web api event
Element: keypress event
The keypress event is fired when a letter, number, punctuation, or symbol key is pressed, or else when the Enter key is pressed — including when the Enter key is pressed in combination with the Shift key or Ctrl key. Otherwise, when a modifier key such as the Alt, Shift, Ctrl, Meta, Esc, or Option key is pressed in isolation, the keypress event is not fired.
[!WARNING] Since this event has been deprecated, you should use
beforeinputorkeydowninstead.
The event bubbles. It can reach Document and Window.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("keypress", (event) => { })
onkeypress = (event) => { }
Event type
A KeyboardEvent. Inherits from UIEvent and Event.
Examples
addEventListener keypress example
This example logs the code value whenever you press a key after focussing the <input> element.
To see which keys cause a keypress event to fire, and which keys don’t, try pressing the following:
- letter keys, number keys, and punctuation keys
- symbol keys such as the $, +, =, %, and + keys
- modifier keys such as the Alt, Shift, Ctrl, Meta, Esc, Option, or ⌘ keys
- the Enter key
- the Enter key in combination with the Shift or Ctrl keys
- the Enter key in combination with modifier keys other than the Shift or Ctrl keys
<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}`;
}
onkeypress equivalent
input.onkeypress = logKey;