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)):
eventTarget.addEventListener("keyup", (event) => {
if (event.isComposing || event.keyCode === 229) {
return;
}
});
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("keyup", (event) => {});
onkeyup = (event) => {};
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 after compositionstart
and before compositionend
.
-
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.
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}`;
}