JavaScript Element keypress Event

What You’ll Learn

The keypress event is a deprecated KeyboardEvent for many printable keys (and Enter). Learn what it fired for, why MDN recommends keydown / beforeinput, how it differs from those APIs, and five try-it labs.

Introduction

Older tutorials often used keypress to react when the user typed a character. Today MDN marks it Deprecated and warns you to use beforeinput or keydown instead.

Historically, keypress fired for letters, digits, punctuation, symbols, and Enter—but not for modifier keys pressed alone (Alt, Shift, Ctrl, Meta, Esc, Option). That incomplete coverage is one reason modern code prefers keydown.

Understanding keypress

An instance event (legacy) that answered: “Did the user press a character-producing key (or Enter)?”

• Deprecated on MDN — avoid in new projects.
• Fires for many printable keys and Enter (with some Shift/Ctrl combos).
• Usually does not fire for modifier keys alone (Alt, Shift, Ctrl, Meta, Esc, …).
• KeyboardEvent — key, code, modifiers, repeat.
• Handler — onkeypress or addEventListener("keypress", ...).
• Replace with keydown or beforeinput.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("keypress", (event) => { });

onkeypress = (event) => { };

Event type

A KeyboardEvent (inherits from UIEvent and Event).

Handy properties

⚖️ keypress vs modern alternatives

🔄 Migrate to keydown

Most keypress listeners can become keydown listeners. Check event.key (or event.code) the same way, and remember keydown also fires for modifiers and arrows.

// Legacy (deprecated)
input.addEventListener("keypress", handler);

// Modern replacement
input.addEventListener("keydown", handler);

Examples Gallery

Examples follow MDN Element: keypress event for learning legacy behavior—then show how to migrate to keydown.

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

input.addEventListener("keypress", logKey);

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

 KeyA Enter

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

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

input.onkeypress = logKey;

 KeyA KeyB

const field = document.getElementById("field");
const out = document.getElementById("out");

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

field.addEventListener("keydown", (event) => {
  if (event.key === "Escape" || event.key.startsWith("Arrow")) {
    out.textContent =
      "keydown only (no keypress expected): key=" + event.key;
  }
});

keydown only (no keypress expected): key=Escape

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

function logKey(e) {
  out.textContent = "Modern keydown: " + e.key + " / " + e.code;
}

// Prefer this over keypress
input.addEventListener("keydown", logKey);

Modern keydown: a / KeyA

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

// Simulate legacy assignment (do not copy this pattern)
input.onkeypress = () => {};

out.textContent = input.onkeypress
  ? "Legacy onkeypress is set — migrate to keydown."
  : "No onkeypress handler found.";

Legacy onkeypress is set — migrate to keydown.

🚀 When You Still See keypress

• Reading older Stack Overflow answers and textbooks.
• Maintaining legacy form scripts that filter typed characters.
• Understanding why Escape/arrow shortcuts were “broken” in old demos.
• Planning a migration to keydown / beforeinput.
• Interview questions about deprecated DOM events.

🔧 How It Worked (Legacy)

📝 Notes

• MDN: Deprecated — status banner required before What You’ll Learn.
• Not marked Experimental or Non-standard on the MDN Element page.
• Prefer keydown or beforeinput for new work.
• Does not cover all keys (modifiers/arrows often missing).
• Related learning: keydown, beforeinput, addEventListener(), JavaScript hub.

💡 Best Practices