HTML onkeydown Attribute

Introduction

The onkeydown attribute is an inline event handler that runs JavaScript when the keydown event fires — the moment a key is pressed down on the keyboard. Attach it to focusable elements like <input> and <textarea>, or listen on document / window with addEventListener for page-wide shortcuts. Use event.key to read which key was pressed (e.g. "Enter", "Escape", "a"). Common uses include keyboard shortcuts, game controls, and live key feedback. Prefer addEventListener("keydown", …) in production; avoid blocking alert() on every keystroke.

What You’ll Learn

Purpose of onkeydown Attribute

The primary purpose of onkeydown is to respond to keyboard input as soon as a key goes down — before it is released. That makes it useful for games, editor shortcuts, “press Enter to search” patterns, and showing which key the user hit. Because keydown fires on every physical press (and repeats while a key is held), you can build responsive keyboard-driven UIs.

For detecting text changes in a field, use oninput instead. For detecting a key release, use onkeyup. Keyboard handlers should respect accessibility — do not trap Tab or Escape without a clear reason.

📝 Syntax

Set onkeydown on a focusable element, or assign element.onkeydown:

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

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

Syntax Rules

• Value is JavaScript executed when the keydown event fires.
• Works on focusable elements and via document.addEventListener("keydown", …).
• Pass event to access key, code, repeat, and modifiers.
• Fires before the character appears in text inputs; use preventDefault() to block default action.
• Repeats while a key is held down (event.repeat === true on repeat fires).
• Modern alternative: element.addEventListener("keydown", handler).
• The keydown event bubbles — delegation on a parent works.

💎 Values

The onkeydown attribute accepts a string of JavaScript code:

• onkeydown="myFunction(event)" — Call a named function with the event.
• onkeydown="logKey(event)" — Inline handler reference.
• JavaScript: field.onkeydown = (e) => { … } assigns the handler.

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    closeDialog();
  }
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    saveDocument();
  }
});

Applicable Elements

onkeydown vs onkeyup vs oninput

Examples Gallery

Show the pressed key, register with addEventListener, and clear a field with Escape.

<input type="text" onkeydown="logKey(event)">
<p id="keyOut"></p>

<script>
  function logKey(e) {
    document.getElementById("keyOut").textContent =
      "Key pressed: " + e.key;
  }
</script>

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

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

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

search.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    search.value = "";
    search.blur();
  }
});

♿ Accessibility

• Do not block Tab — Avoid preventDefault() on Tab unless building a focused widget with proper trap semantics.
• Document shortcuts — Tell users about custom keys (e.g. “Press Escape to close”).
• Avoid alert() on keydown — Blocking dialogs interrupt screen readers and keyboard flow.
• Prefer native controls — Buttons and links work with Enter/Space without custom key handlers.
• Focus management — After Escape closes a panel, return focus to the element that opened it.

💡 Best Practices