Element: keyup event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

Thekeyup event is fired when a key is released.

Thekeydown andkeyup events provide a code indicating which key is pressed, whilekeypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 bykeydown andkeyup, but as 97 bykeypress. 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 iscontentEditable, 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 eventbubbles. It can reachDocument andWindow.

The event target might change between different key events. For example, thekeydown target for pressing theTab key would be different from thekeyup target, because the focus has changed.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

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

Event type

AKeyboardEvent. Inherits fromUIEvent andEvent.

Event properties

This interface also inherits properties of its parents,UIEvent andEvent.

KeyboardEvent.altKeyRead only: Returns a boolean value that istrue if theAlt (Option or⌥ on macOS) key was active when the key event was generated.
KeyboardEvent.codeRead only: Returns a string with the code value of the physical key represented by the event.
Warning:This ignores the user's keyboard layout, so that if the user presses the key at the "Y" position in a QWERTY keyboard layout (near the middle of the row above the home row), this will always return "KeyY", even if the user has a QWERTZ keyboard (which would mean the user expects a "Z" and all the other properties would indicate a "Z") or a Dvorak keyboard layout (where the user would expect an "F"). If you want to display the correct keystrokes to the user, you can useKeyboard.getLayoutMap().
KeyboardEvent.ctrlKeyRead only: Returns a boolean value that istrue if theCtrl key was active when the key event was generated.
KeyboardEvent.isComposingRead only: Returns a boolean value that istrue if the event is fired between aftercompositionstart and beforecompositionend.
KeyboardEvent.keyRead only: Returns a string representing the key value of the key represented by the event.
KeyboardEvent.locationRead only: Returns a number representing the location of the key on the keyboard or other input device. A list of the constants identifying the locations is shown inKeyboard locations.
KeyboardEvent.metaKeyRead only: Returns a boolean value that istrue if theMeta key (on Mac keyboards, the⌘ Command key; on Windows keyboards, the Windows key (⊞)) was active when the key event was generated.
KeyboardEvent.repeatRead only: Returns a boolean value that istrue if the key is being held down such that it is automatically repeating.
KeyboardEvent.shiftKeyRead only: Returns a boolean value that istrue if theShift key was active when the key event was generated.

Examples

addEventListener keyup example

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

html

<input placeholder="Click here, then press and release a key." size="40" /><p></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, thekeydown andkeyup events are now fired duringInput method editor composition, to improve cross-browser compatibility for CJKT users (Firefox bug 354358). To ignore allkeyup events that are part of composition, do something like this:

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

Note:Unlikekeydown,keyup events do not have specialkeyCode values for IME events. However, likekeydown,compositionstart may fireafterkeyup when typing the first character that opens up the IME, andcompositionend may firebeforekeyup when typing the last character that closes the IME. In these cases,isComposing is false even when the event is part of composition.

Specifications

Specification
UI Events # event-type-keyup
HTML # handler-onkeyup

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on⁨Sep 25, 2025⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換