The keyup event is fired when a key is released.

General info

Interface KeyboardEvent
Bubbles Yes
Cancelable Yes
Target Document, Element
Default Action None

Properties

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not.
cancelable Read only Boolean Whether the event is cancellable or not.
view Read only WindowProxy Document.defaultView (window of the document)
detail Read only long (float) 0.
target Read only EventTarget (DOM element) Focused element processing the key event, root element if no suitable input element focused.
key Read only DOMString (string) The key value of the key represented by the event. If the value has a printed representation, this value is a non-empty Unicode string containing that character.. Otherwise, it's one of the key value strings specified in Key values. If the key can't be identified, this is the string "Unidentified".
code Read only DOMString (string) Holds a string that identifies the physical key being pressed. The value is not affected by the current keyboard layout or modifier state, so a particular key will always return the same value.
charCode Read only unsigned long (int) The Unicode reference number of the key; this attribute is used only by the keypress event. For keys whose char attribute contains multiple characters, this is the Unicode value of the first character in that attribute.
Warning: This attribute is deprecated; you should use key instead, if available.
keyCode Read only unsigned long (int) A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII (RFC 20) or Windows 1252 code corresponding to the key; see Virtual key codes for a list of common values. If the key can't be identified, this value is 0.
Warning: This attribute is deprecated; you should use key instead, if available.
which Read only unsigned long (int) A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as keyCode.
Warning: This attribute is deprecated; you should use key instead, if available.
location Read only long (float) The location of the key on the device.
repeat Read only Boolean true if a key has been depressed long enough to trigger key repetition, otherwise false.
locale Read only DOMString The language code for the key event, if available; otherwise, the empty string.
ctrlKey Read only Boolean true if the control key was down when the event was fired. false otherwise.
shiftKey Read only Boolean true if the shift key was down when the event was fired. false otherwise.
altKey Read only Boolean true if the alt key was down when the event was fired. false otherwise.
metaKey Read only Boolean true if the meta key was down when the event was fired. false otherwise.

Notes

  • keydown and keyup 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.
  • Since Firefox 65, the keyup and keydown events are now fired during IME composition, to improve cross-browser compatibility for CJKT users (bug 354358, also see keydown and keyup events are now fired during IME composition for more useful details). To ignore all keyup events that are part of composition, do something like this (229 is a special value set for a keyCode relating to an even that has been processed by an IME):
    eventTarget.addEventListener("keyup", event => {
      if (event.isComposing || event.keyCode === 229) {
        return;
      }
      // do something
    });
    

Example

This example logs the KeyboardEvent.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 id="log"></p>

JavaScript

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

input.addEventListener('keyup', logKey);

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

Result

Specification

DOM L3

See also

Document Tags and Contributors

Last updated by: irenesmith,