Element: keypress event
=======================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

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 `Alt`, `Shift`, `Ctrl`, or `Meta`.

**Warning:** Since this event has been deprecated, you should use `beforeinput` or `keydown` instead.

Syntax
------

Use the event name in methods like `addEventListener()`, or set an event handler property.


```js
addEventListener("keypress", (event) => {});

onkeypress = (event) => {};
```

Event type
----------

A `KeyboardEvent`. Inherits from `UIEvent` and `Event`.

Event

UIEvent

KeyboardEventEvent properties
----------------

*This interface also inherits properties of its parents, `UIEvent` and `Event`.*

`KeyboardEvent.altKey` Read only 

Returns a boolean value that is `true` if the `Alt` (`Option` or `⌥` on macOS) key was active when the key event was generated.

`KeyboardEvent.code` Read only 

Returns a string with the code value of the physical key represented by the event.

**Warning:** This ignores the user's keyboard layout, so that if the user presses the key at the "Y" position in a QWERTY keyboard layout (near the middle of the row above the home row), this will always return "KeyY", even if the user has a QWERTZ keyboard (which would mean the user expects a "Z" and all the other properties would indicate a "Z") or a Dvorak keyboard layout (where the user would expect an "F"). If you want to display the correct keystrokes to the user, you can use `Keyboard.getLayoutMap()`.

`KeyboardEvent.ctrlKey` Read only 

Returns a boolean value that is `true` if the `Ctrl` key was active when the key event was generated.

`KeyboardEvent.isComposing` Read only 

Returns a boolean value that is `true` if the event is fired between after `compositionstart` and before `compositionend`.

`KeyboardEvent.key` Read only 

Returns a string representing the key value of the key represented by the event.

`KeyboardEvent.location` Read only 

Returns a number representing the location of the key on the keyboard or other input device. A list of the constants identifying the locations is shown in Keyboard locations.

`KeyboardEvent.metaKey` Read only 

Returns a boolean value that is `true` if the `Meta` key (on Mac keyboards, the `⌘ Command` key; on Windows keyboards, the Windows key (`⊞`)) was active when the key event was generated.

`KeyboardEvent.repeat` Read only 

Returns a boolean value that is `true` if the key is being held down such that it is automatically repeating.

`KeyboardEvent.shiftKey` Read only 

Returns a boolean value that is `true` if the `Shift` key was active when the key event was generated.

Examples
--------

### addEventListener keypress example

This example logs the `KeyboardEvent.code` value whenever you press a key after focussing the `<input>` element.


```html
<div>
  <label for="sample">Focus the input and type something:</label>
  <input type="text" name="text" id="sample" />
</div>
<p id="log"></p>
```



```js
const log = document.getElementById("log");
const input = document.querySelector("input");

input.addEventListener("keypress", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### onkeypress equivalent


```js
input.onkeypress = logKey;
```

Specifications
--------------

| Specification |
| --- |
| UI Events # event-type-keypress |
| HTML Standard # handler-onkeypress |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The `Document` interface, which the event also targets.
* Related events:
    + `input`
    + `keydown`
    + `keyup`