Element: keyup event
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.
Keyboard events are only generated by <input>
, <textarea>
, <summary>
and anything with the contentEditable
or tabindex
attribute.
Since Firefox 65, the keyup
and keydown
events are now fired during IME 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 (229 is a special value set for a keyCode
relating to an event that has been processed by an input-method editor (IME)):
js
eventTarget.addEventListener("keyup", (event) => {
if (event.isComposing || event.keyCode === 229) {
return;
}
// do something
});
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("keyup", (event) => {});
onkeyup = (event) => {};
Event type
A KeyboardEvent
. Inherits from Event
.
Event properties
This interface also inherits properties of its parents, UIEvent
and Event
.
KeyboardEvent.altKey
Read only-
Returns a boolean value that is
true
if the Alt (Option or ⌥ on macOS) key was active when the key event was generated. KeyboardEvent.code
Read 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 use
Keyboard.getLayoutMap()
. KeyboardEvent.ctrlKey
Read only-
Returns a boolean value that is
true
if the Ctrl key was active when the key event was generated. KeyboardEvent.isComposing
Read only-
Returns a boolean value that is
true
if the event is fired between aftercompositionstart
and beforecompositionend
. KeyboardEvent.key
Read only-
Returns a string representing the key value of the key represented by the event.
KeyboardEvent.locale
Read only-
Returns a string representing a locale string indicating the locale the keyboard is configured for. This may be the empty string if the browser or device doesn't know the keyboard's locale.
Note: This does not describe the locale of the data being entered. A user may be using one keyboard layout while typing text in a different language.
KeyboardEvent.location
Read 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 in Keyboard locations.
KeyboardEvent.metaKey
Read only-
Returns a boolean value that is
true
if the Meta key (on Mac keyboards, the ⌘ Command key; on Windows keyboards, the Windows key (⊞)) was active when the key event was generated. KeyboardEvent.repeat
Read only-
Returns a boolean value that is
true
if the key is being held down such that it is automatically repeating. KeyboardEvent.shiftKey
Read only-
Returns a boolean value that is
true
if the Shift key was active when the key event was generated.
Examples
addEventListener keyup 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>
js
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("keyup", logKey);
function logKey(e) {
log.textContent += ` ${e.code}`;
}
onkeyup equivalent
js
input.onkeyup = logKey;
Specifications
Specification |
---|
UI Events # event-type-keyup |
HTML Standard # handler-onkeyup |
Browser compatibility
BCD tables only load in the browser