Element: keypress event

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.

Event 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.

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.

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;

Specifications

Browser compatibility

See also

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