JavaScript Element keyup Event

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

Definition

In JavaScript, the keyup event fires when a key is released (MDN). Pair it with keydown for press/release control. Prefer both over the Deprecated keypress event.

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

Syntax

Listen for keyup. Start with this line.

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

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

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

Parameters

ParameterDescription
Event nameRequired. "keyup"
Handler propOptional. onkeyup

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 when the key is released.

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

input.addEventListener("keyup", 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 keyup. Fires once when the key is released.
  3. Read code. Physical key id like KeyA.
  4. Append to a log. Easy way to study release events.

Example 2 — Press / Release Pair

Start on keydown, stop on keyup — classic held-key pattern.

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

field.addEventListener("keydown", (event) => {
  if (event.code === "Space" && !event.repeat) {
    holding = true;
    out.textContent = "holding Space…";
  }
});

field.addEventListener("keyup", (event) => {
  if (event.code === "Space") {
    holding = false;
    out.textContent = "released Space";
  }
});
Try It Yourself

How It Works

  1. Start on keydown. Guard with !event.repeat for one start.
  2. Stop on keyup. Release ends the hold cleanly.
  3. Match by code. Physical key stays stable across layouts.
  4. Use case. Games, long-press, and drag-style keyboard UX.

Example 3 — Skip IME Composition (MDN)

Ignore keyups that belong to an input method editor session.

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

field.addEventListener("keyup", (event) => {
  if (event.isComposing) {
    return;
  }
  console.log(event.key);
});
Try It Yourself

How It Works

  1. Check isComposing. True while an IME session is active.
  2. No 229 check. MDN: keyup does not use that keydown marker.
  3. Return early. Avoid treating composition releases as shortcuts.
  4. Why it matters. Improves compatibility for CJKT text input.
Compatibility

Browser Support

Element keyup is Baseline Widely available (MDN: since July 2015). Safe for press/release UX in modern and older evergreen browsers.

✓ Baseline · Widely available

Element keyup

KeyboardEvent when a key is released — long-established across browsers.

99% Widely available
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
keyup Baseline

Bottom line: Prefer keydown/keyup over keypress. Use keyup to end holds; remember modifiers reflect post-release state.

Frequently Asked Questions

It fires when a key is released. Together with keydown it gives you a press/release pair for shortcuts, games, and held-key controls (MDN).
No. MDN marks Element keyup as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
A KeyboardEvent. Useful properties include key, code, altKey, ctrlKey, shiftKey, metaKey, and isComposing.
keydown fires when the key goes down (and may repeat while held). keyup fires once when the key is released. Start actions on keydown; stop or commit on keyup.
Yes. For Tab, keydown and keyup can target different elements because focus already moved (MDN).
Skip when event.isComposing is true. Unlike keydown, keyup does not use the special keyCode 229 IME marker (MDN).

Next: lostpointercapture

Learn when an element loses pointer capture during pointer interaction.

lostpointercapture 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 keypress Event JavaScript Element lostpointercapture Event