HTML onkeypress Attribute

Introduction

The onkeypress attribute is an inline event handler for the keypress event — historically fired when the user presses a printable character key in a focused field. You will still see it in older tutorials and legacy code. Important: the keypress event is deprecated in modern web standards. For new projects, use onkeydown, onkeyup, or oninput instead. This page teaches onkeypress so you understand legacy markup, with clear guidance on what to use today.

What You’ll Learn

Purpose of onkeypress Attribute

The original purpose of onkeypress was to react when a user typed a character — for example blocking non-alphanumeric input or counting keystrokes. It fires after keydown and before keyup for character keys in many browsers, but not for keys like Escape, arrows, or F-keys.

Today, the same goals are better achieved with oninput (value changed), pattern / inputmode HTML attributes, or onkeydown with event.key. Learn onkeypress to maintain old code; write new code with modern events.

📝 Syntax

Set onkeypress on a focusable element (legacy pattern):

<input type="text" onkeypress="myFunction(event)">

<script>
  function myFunction(e) {
    console.log("Character key:", e.key);
  }
</script>

Syntax Rules

• Value is JavaScript executed when the keypress event fires.
• Historically limited to character-producing keys — not reliable for all keys.
• Pass event and use event.key — avoid legacy keyCode.
• Use event.preventDefault() to block a character from entering the field.
• Modern replacement: onkeydown or oninput.
• Alternative (legacy): element.addEventListener("keypress", handler).
• The keypress event bubbles.

💎 Values

The onkeypress attribute accepts a string of JavaScript code:

• onkeypress="myFunction()" — Call a named function.
• onkeypress="validateUsername(event)" — Pass the event object.
• JavaScript: field.onkeypress = (e) => { … } assigns the handler.

// Preferred for new code — not keypress:
username.addEventListener("keydown", (e) => {
  if (e.key.length === 1 && !/^[a-z0-9]$/i.test(e.key)) {
    e.preventDefault();
  }
});

// Or validate the whole value:
username.addEventListener("input", () => {
  username.value = username.value.replace(/[^a-z0-9]/gi, "");
});

Applicable Elements

onkeypress vs onkeydown vs oninput

Examples Gallery

Alphanumeric filter (legacy style), addEventListener, and the modern keydown replacement.

<input type="text" id="username"
  onkeypress="validateUsername(event)">

<script>
  function validateUsername(e) {
    if (e.key.length === 1 && !/^[a-z0-9]$/i.test(e.key)) {
      e.preventDefault();
    }
  }
</script>

<input type="text" id="dynamicField">

<script>
  document.getElementById("dynamicField").addEventListener("keypress", function (e) {
    document.getElementById("log").textContent = "Key: " + e.key;
  });
</script>

const username = document.getElementById("username");

username.addEventListener("input", () => {
  username.value = username.value.replace(/[^a-z0-9]/gi, "");
});

♿ Accessibility

• Do not block standard keys silently — If you prevent input, show a visible error message.
• Allow keyboard navigation — Never use keypress handlers to trap Tab or Escape.
• Prefer HTML validation — required, pattern, and labels work with assistive tech.
• Announce errors — Use aria-invalid and aria-describedby on validated fields.
• Use modern events — Screen reader and browser behavior is more predictable with input and keydown.

💡 Best Practices