HTML

Structure of content on the web

  • Web APIs

    Interfaces for building web applications

  • Learn
  • HTTP Observatory

    Scan a website for free

  • Web APIs
  • ariaAtomic
  • ariaBusy
  • ariaColIndexText
  • ariaDisabled
  • ariaKeyShortcuts
  • ariaModal
  • ariaPlaceholder
  • ariaRelevant
  • ariaRowIndex
  • ariaSetSize
  • ariaValueNow
  • childElementCount
  • clientHeight
  • currentCSSZoom
  • elementTiming
  • lastElementChild
  • outerHTML
  • scrollHeight
  • scrollLeftMax
  • scrollTopMax
  • tagName
  • Instance methods
    1. attachShadow()
    2. computedStyleMap()
    3. getAttributeNode()
    4. getClientRects()
    5. getHTML()
    6. hasPointerCapture()
    7. matches()
    8. releasePointerCapture()
    9. removeAttributeNS()
    10. requestPointerLock()
    11. scrollIntoViewIfNeeded()
    12. setAttributeNodeNS()
    13. setCapture()
    14. afterscriptexecute
    15. animationstart
    16. beforematch
    17. beforescriptexecute
    18. beforexrselect
    19. compositionstart
    20. copy
    21. DOMActivate
    22. DOMMouseScroll
    23. fullscreenchange
    24. gesturechange
    25. gestureend
    26. gesturestart
    27. keypress
    28. mouseenter
    29. mouseover
    30. mousewheel
    31. MozMousePixelScroll
    32. pointerenter
    33. pointerover
    34. pointerrawupdate
    35. scrollsnapchange
    36. scrollsnapchanging
    37. touchmove
    38. transitionrun
    39. webkitmouseforcechanged
    40. webkitmouseforcedown
    41. webkitmouseforceup
    42. webkitmouseforcewillbegin
    43. Learn more
    44. See full compatibility

    • 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.

    The event target of a key event is the currently focused element which is processing the keyboard activity. This includes: <a>, bubbles. It can reach Window.

    The event target might change between different key events. For example, the keydown target for pressing the Tab key would be different from the keyup target, because the focus has changed.

    Syntax

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

    js
    addEventListener("keyup", (event) => {});

onkeyup = (event) => {};

    Event type

    A Event.

    Event UIEvent KeyboardEvent

    Event properties

    This interface also inherits properties of its parents, 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.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 <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}`;
}