This page is Almost Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



Deprecated event for detecting when a key was pressed on the keyboard.

Overview Table

Synchronous Yes
Bubbles Yes
Target [dom/Element](/dom/Element), [dom/Document](/dom/Document)
Cancelable Yes
Default action Varies: launch text composition system; blur and focus events; DOMActivate event; other event
This event used to be used to detect when a key value was inserted into the DOM. Developers should use beforeInput, keyup, or keydown events depending on the task instead of this event.

Context information
focused element which triggered the key event. This will be the root element if no suitable input element is focused.
legacy character code value for the event
legacy numerical code for the key pressed
legacy numerical code for the key pressed
The key value of the key pressed
The location of the key on the device
true if ‘Alt’ modifier was active, otherwise false
true if ‘Shift’ modifier was active, otherwise false
true if ‘Control’ modifier was active, otherwise false
true if ‘Meta’ modifier was active, otherwise false
true if a key has been depressed long enough to trigger key repetition, otherwise false.


<!doctype html>
    <meta charset="utf-8">
    <title>Keypress event demonstration</title>
        // this styling only exists so things look better on
        form {
            padding-top: 30px;
        <label for="keypress">Keypress</label>
        <input name="keypress"/>
    <div id="target">
        <p>The last key code you entered for keypress is: <span id="keypressEcho"></span></p>

    // Getting the target elements from the DOM that we would like to mess with.
    var keypressInput = document.getElementsByName('keypress')[0];
    var keypressTarget = document.getElementById('keypressEcho');

    // This is going to run the function whenever a keypress event occurs on the Input element.
    keypressInput.addEventListener('keypress', function(e) {
        //Change the text of the target element to be the number of the key pressed. (number is based on the ASCII key standard.)
        keypressTarget.textContent = e.which;
        // Log the key event as well.

View live example


 ===Related event order===
  1. keydown
  2. beforeInput
  3. keypress
  4. input
  5. keyup

See also

Other articles

External resources