Skip to content

Commit

Permalink
Document that the Enter key causes the “keypress” event to fire (#37817)
Browse files Browse the repository at this point in the history
Document that the Enter key causes the keypress event to fire

This change updates the page for the “keypress” event to match actual
behavior in browsers — by changing the page to state that the event
fires when the Enter key is pressed — not only when a key that produces
a character value is pressed.

See w3c/uievents#183 (comment)
and w3c/uievents#266 (comment)
and w3c/uievents#392

Otherwise, without this change, the information on the “keypress” page
incorrectly doesn’t match actual browser behavior — in that the page
states that the “keypress” event fires _only_ when a key that produces a
character value are pressed, while in fact browsers also fire the event
when the Enter key is pressed.
  • Loading branch information
sideshowbarker authored Feb 2, 2025
1 parent b3255d8 commit b3c6c88
Showing 1 changed file with 10 additions and 3 deletions.
13 changes: 10 additions & 3 deletions files/en-us/web/api/element/keypress_event/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@ browser-compat: api.Element.keypress_event

{{APIRef}} {{deprecated_header}}

The **`keypress`** event is fired when a key that produces a character value is pressed down.

Examples of keys that produce a character value are alphabetic, numeric, and punctuation keys. Examples of keys that don't produce a character value are modifier keys such as <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, or <kbd>Meta</kbd>.
The **`keypress`** event is fired when a [letter, number, punctuation, or symbol](https://w3c.github.io/uievents/#unicode-character-categories) key is pressed, or else when the <kbd>Enter</kbd> key is pressed — including when the <kbd>Enter</kbd> key is pressed in combination with the <kbd>Shift</kbd> key or <kbd>Ctrl</kbd> key. Otherwise, when a modifier key such as the <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, <kbd>Meta</kbd>, <kbd>Esc</kbd>, or <kbd>Option</kbd> key is pressed in isolation, the `keypress` event is _not_ fired.

> [!WARNING]
> Since this event has been deprecated, you should use [`beforeinput`](/en-US/docs/Web/API/Element/beforeinput_event) or [`keydown`](/en-US/docs/Web/API/Element/keydown_event) instead.
Expand Down Expand Up @@ -71,6 +69,15 @@ _This interface also inherits properties of its parents, {{domxref("UIEvent")}}

This example logs the {{domxref("KeyboardEvent.code")}} value whenever you press a key after focussing the {{htmlelement("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 <kbd>$</kbd>, <kbd>+</kbd>, <kbd>=</kbd>, <kbd>%</kbd>, and <kbd>+</kbd> keys
- modifier keys such as the <kbd>Alt</kbd>, <kbd>Shift</kbd>, <kbd>Ctrl</kbd>, <kbd>Meta</kbd>, <kbd>Esc</kbd>, <kbd>Option</kbd>, or <kbd>⌘</kbd> keys
- the <kbd>Enter</kbd> key
- the <kbd>Enter</kbd> key in combination with the <kbd>Shift</kbd> or <kbd>Ctrl</kbd> keys
- the <kbd>Enter</kbd> key in combination with modifier keys other than the <kbd>Shift</kbd> or <kbd>Ctrl</kbd> keys

```html
<div>
<label for="sample">Focus the input and type something:</label>
Expand Down

0 comments on commit b3c6c88

Please # to comment.