Skip to content

Commit

Permalink
Document that the Enter key causes the keypress event to fire
Browse files Browse the repository at this point in the history
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 committed Jan 27, 2025
1 parent bf90120 commit 103abd4
Showing 1 changed file with 11 additions and 2 deletions.
13 changes: 11 additions & 2 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,9 @@ 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.
The **`keypress`** event is fired either when a key that produces a character value is pressed down, or else when the <kbd>Enter</kbd> is pressed down — including when the <kbd>Enter</kbd> key is pressed down in combination with the <kbd>Shift</kbd> or <kbd>Ctrl</kbd> keys.

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>.
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>, <kbd>Meta</kbd>, <kbd>Esc</kbd>, <kbd>Option</kbd>, or <kbd></kbd>.

> [!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 +71,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 103abd4

Please sign in to comment.