Element: keyup event
The keyup
event is fired when a key is released.
Bubbles | Yes |
---|---|
Cancelable | Yes |
Interface | KeyboardEvent |
Event handler property | onkeyup |
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.
Since Firefox 65, the keyup
and keydown
events are now fired during IME composition, to improve cross-browser compatibility for CJKT users (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 IME):
eventTarget.addEventListener("keyup", event => { if (event.isComposing || event.keyCode === 229) { return; } // do something });
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}`; }
onkeyup equivalent
input.onkeyup = logKey;
Specifications
Specification |
---|
UI Events # event-type-keyup |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
keyup_event |
Yes |
≤18 |
Yes |
? |
? |
1.2 |
Yes |
Yes |
Yes |
? |
1 |
Yes |
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event