GlobalEventHandlers.onkeypress

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 onkeypress property of the GlobalEventHandlers mixin is an event handler that processes keypress events.

The keypress event should fire when the user presses a key on the keyboard. However, in practice browsers do not fire keypress events for certain keys.

Warning: The onkeypress event handler has been deprecated. You may want to use onkeydown instead.

Syntax

target.onkeypress = functionRef;

Value

functionRef is a function name or a function expression. The function receives a KeyboardEvent object as its sole argument.

Examples

Basic example

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

HTML

<input>
<p id="log"></p>

JavaScript

const input = document.querySelector('input');
const log = document.getElementById('log');

input.onkeypress = logKey;

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

Result

Filter keys with a regular expression

This example filters the characters typed into a form field using a regular expression.

HTML

<label>Enter numbers only:
  <input>
</label>

JavaScript

function numbersOnly(event) {
  return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));
}

const input = document.querySelector('input');
input.onkeypress = numbersOnly;

// Prevent pasting (since pasted content might include non-number characters)
input.onpaste = event => false;

Result

Capture the typing of a hidden word

The following JavaScript function will do something after the user types the word "exit" in any point of a page. 

/* Type the word "exit" in any point of your page... */

(function () {
  const sSecret = /* Choose your hidden word...: */ "exit";
  let nOffset = 0;

  document.onkeypress = function(oPEvt) {
    let oEvent = oPEvt || window.event,
        nChr = oEvent.charCode,
        sNodeType = oEvent.target.nodeName.toUpperCase();

    if (nChr === 0 ||
        oEvent.target.contentEditable.toUpperCase() === "TRUE" ||
        sNodeType === "TEXTAREA" ||
        sNodeType === "INPUT" && oEvent.target.type.toUpperCase() === "TEXT") {
      return true;
    }

    if (nChr !== sSecret.charCodeAt(nOffset)) {
      nOffset = nChr === sSecret.charCodeAt(0) ? 1 : 0;
    } else if (nOffset < sSecret.length - 1) {
      nOffset++;
    } else {
      nOffset = 0;
      /* Do something here... */
      alert("Yes!!!");
      location.assign("https://developer.mozilla.org/");
    }

    return true;
  };
})();

Note: A more complete framework for capturing the typing of hidden words is available on GitHub.

Specifications

Specification
HTML Standard (HTML)
# handler-onkeypress

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
onkeypress
1
12
9
4
≤12.1
1
1
18
9
≤12.1
1
1.0

Browser compatibility notes

  • The keypress event is no longer fired for non-printable keys (see bug 968056 for Firefox 65's implementation of this), except for the Enter key, and the Shift + Enter and Ctrl + Enter key combinations (these were kept for cross-browser compatibility purposes).

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onkeypress