JavaScript Element keypress Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word KEYPRESS

Definition

In JavaScript, the keypress event fires when a letter, number, punctuation, or symbol key is pressed, or when Enter is pressed — including Enter with Shift or Ctrl (MDN). Modifier keys alone (Alt, Shift, Ctrl, Meta, Esc) usually do not fire it.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for keypress. Start with this line.

JavaScript
element.addEventListener("keypress", (event) => { … })
CallWhat it does
element.addEventListener("keypress", (event) => { … })Primary signature.

Built into the browser. Listen with el.addEventListener("keypress", …) — no import required.

Library declarations
JavaScript
element.addEventListener("keypress", (event) => { … })

Parameters

ParameterDescription
Event nameRequired. "keypress" (Deprecated)
Handler propOptional. onkeypress

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Log code (MDN)

Append each physical key id while typing — only when keypress fires.

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

input.addEventListener("keypress", logKey);

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

How It Works

  1. Focus the field. Key events target the focused element.
  2. Listen for keypress. Fires for printable keys and Enter.
  3. Read code. Physical key id like KeyA.
  4. Remember status. Deprecated — study only; prefer keydown.

Example 2 — Which Keys Fire

Show when keypress runs vs when only keydown would.

JavaScript
const field = document.querySelector("input");
const out = document.getElementById("out");

field.addEventListener("keypress", (event) => {
  out.textContent = "keypress: " + event.code;
});

field.addEventListener("keydown", (event) => {
  // Escape / modifiers alone: keydown yes, keypress often no
  if (event.key === "Escape" || event.key === "Control") {
    out.textContent = "keydown only: " + event.code + " (no keypress)";
  }
});
Try It Yourself

How It Works

  1. Listen to both events. Compare coverage side by side.
  2. Type a letter. keypress usually fires.
  3. Press Escape. Often only keydown fires.
  4. Takeaway. Incomplete coverage is why keypress is Deprecated.

Example 3 — Prefer keydown

Same Enter shortcut — using the modern event MDN recommends.

JavaScript
const field = document.querySelector("input");

// instead of: field.addEventListener("keypress", …)
field.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    console.log("submit:", field.value);
  }
  if (event.key === "Escape") {
    console.log("cancel");
  }
});
Try It Yourself

How It Works

  1. Swap the event name. Use keydown instead of keypress.
  2. Keep event.key. Meaning stays clear ("Enter", "Escape").
  3. Gain Escape (and more). Control keys work reliably.
  4. Follow MDN. Prefer keydown or beforeinput in new code.
Compatibility

Browser Support

Element keypress is still widely implemented for compatibility, but MDN marks it Deprecated. Do not add it to new code — migrate to keydown or beforeinput.

✓ Deprecated

Element keypress

Legacy character-key KeyboardEvent — still present, not recommended.

— Deprecated
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
keypress Deprecated

Bottom line: Still works in many browsers for old pages, but MDN warns against new use. Prefer keydown for keys and beforeinput for text edits.

Frequently Asked Questions

It fires when a letter, number, punctuation, or symbol key is pressed, or when Enter is pressed (including with Shift or Ctrl). Modifier keys alone (Alt, Shift, Ctrl, Meta, Esc) usually do not fire keypress (MDN).
MDN marks Element keypress as Deprecated only — not Experimental and not Non-standard. Avoid it in new projects; prefer keydown or beforeinput.
MDN: use beforeinput or keydown. Prefer keydown for shortcuts and all-key detection; use beforeinput when you need to inspect text edits before they apply.
A KeyboardEvent (inherits from UIEvent and Event), same family as keydown and keyup.
keypress historically targeted character-producing keys. Many control and modifier keys do not fire it — another reason modern code prefers keydown.
Yes. It can reach Document and Window (MDN).

Next: keyup

Learn the release-side keyboard event that pairs with keydown.

keyup tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element keydown Event JavaScript Element keyup Event