JavaScript Element keyup Event

What You’ll Learn

The keyup event fires when a key is released. Learn addEventListener vs onkeyup, key vs code, pairing with keydown, Tab focus caveats, IME tips, and five try-it labs.

Introduction

If keydown is “the key went down,” keyup is “the key came back up.” That release signal is perfect for stopping movement, ending a hold-to-fire action, or committing a shortcut only after the key lifts.

The event target is usually the focused element. If nothing suitable is focused, it may be Document or the root. The event bubbles to Document and Window.

Understanding keyup

An instance event that answers: “Did a key just get released?”

• Fires when any key is released.
• KeyboardEvent — key, code, modifier flags, isComposing.
• Handler — onkeyup or addEventListener("keyup", ...).
• Bubbles — can reach Document / Window.
• Pairs with keydown for press/release control.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

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

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

onkeyup = (event) => { };

Event type

A KeyboardEvent (inherits from UIEvent and Event).

Handy properties

⚖️ keyup vs keydown vs keypress

⚠️ Tab Can Change the Target Before keyup

MDN notes that the event target can differ between keydown and keyup. With Tab, focus moves on the way down, so the release may fire on the newly focused element.

For IME composition, skip keyup when event.isComposing is true. Unlike keydown, there is no special keyCode === 229 marker on keyup.

eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing) {
    return;
  }
  // handle release safely
});

Examples Gallery

Examples follow MDN Element: keyup event. Focus a field, press a key, then release it to see events.

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

input.addEventListener("keyup", logKey);

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

 KeyA Enter

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

field.onkeyup = (event) => {
  out.textContent = "released key=" + event.key + " code=" + event.code;
};

released key=a code=KeyA

const stage = document.getElementById("stage");
const out = document.getElementById("out");
const held = new Set();

stage.tabIndex = 0;
stage.focus();

stage.addEventListener("keydown", (event) => {
  if (!event.key.startsWith("Arrow")) return;
  held.add(event.key);
  out.textContent = "holding: " + [...held].join(", ");
  event.preventDefault();
});

stage.addEventListener("keyup", (event) => {
  held.delete(event.key);
  out.textContent = held.size
    ? "holding: " + [...held].join(", ")
    : "released — idle";
});

released — idle

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

function label(el) {
  return el.id || el.tagName.toLowerCase();
}

document.addEventListener("keydown", (event) => {
  if (event.key !== "Tab") return;
  out.textContent = "keydown on " + label(event.target);
});

document.addEventListener("keyup", (event) => {
  if (event.key !== "Tab") return;
  out.textContent += " → keyup on " + label(event.target);
});

keydown on a → keyup on b

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

document.addEventListener("keyup", (event) => {
  if (event.isComposing) {
    return;
  }
  if (event.key === "Enter") {
    out.textContent = "Enter released (not composing)";
  }
});

Enter released (not composing)

🚀 Common Use Cases

• Stopping movement or shooting when a key is released.
• Clearing “held” shortcut state after Ctrl/Cmd combinations.
• Committing an action only after the key lifts (less accidental repeats).
• Accessibility patterns that need press and release symmetry.
• Debugging focus changes with Tab by comparing keydown/keyup targets.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available — no Deprecated / Experimental / Non-standard banner.
• Prefer keydown / keyup over deprecated keypress.
• Tab may change focus between keydown and keyup.
• IME guard for keyup: check isComposing (no keyCode === 229 tip).
• Related learning: keydown, keypress (deprecated), addEventListener(), JavaScript hub.

💡 Best Practices