The keyup event is fired when a key is released.

The keydown and keyup events provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events.

The event target of a key event is the currently focused element which is processing the keyboard activity. This includes: <input>, <textarea>, anything that is contentEditable, and anything else that can be interacted with the keyboard, such as <a>, <button>, and <summary>. If no suitable element is in focus, the event target will be the <body> or the root. The event bubbles. It can reach Document and Window.

The event target might change between different key events. For example, the keydown target for pressing the Tab key would be different from the keyup target, because the focus has changed.

Because the event fires after the key is released, modifier-key properties (ctrlKey, altKey, shiftKey, and metaKey) reflect the state after release. For example, ctrlKey is false on the keyup event for the Control key itself. If another key is released while the Control key remains pressed, ctrlKey is true on that key's keyup event.

Syntax

Use the event name in addEventListener():

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

Alternatively, assign to the event handler property of the interface:

onkeyup = (event) => { }

Event type

A KeyboardEvent. Inherits from UIEvent and Event.

Examples

addEventListener keyup example

This example logs the KeyboardEvent.code value whenever you release a key inside the <input> element.

<input placeholder="Click here, then press and release a key." size="40" />
<p id="log"></p>

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

input.addEventListener("keyup", logKey);

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

keyup events with IME

Since Firefox 65, the keydown and keyup events are now fired during Input method editor composition, to improve cross-browser compatibility for CJKT users (Firefox bug 354358). To ignore all keyup events that are part of composition, do something like this:

eventTarget.addEventListener("keyup", (event) => {
  if (event.isComposing) {
    return;
  }
  // do something
});

Specifications

Browser compatibility

See also

• input
• keydown
• keypress