Web/API/GlobalEventHandlers/onkeypress

DeprecatedThis 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 EventHandler 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.

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}`;
}

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;

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("Yesss!!!");
      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	Status	Comment
HTML Living StandardThe definition of 'onkeypress' in that specification.	Living Standard

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
onkeypress	Chrome Full support Yes	Edge Full support ≤18	Firefox Full support Yes	IE ?	Opera ?	Safari ?	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes

Legend

Full support  

Full support

Compatibility unknown  

Compatibility unknown

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

• keypress event
• Related event handlers
  • GlobalEventHandlers.onkeydown
  • GlobalEventHandlers.onkeyup

GlobalEventHandlers.onkeypress by Mozilla Contributors is licensed under CC-BY-SA 2.5.