HTML onkeyup Attribute

Introduction

The onkeyup attribute is an inline event handler that runs JavaScript when the keyup event fires — when the user releases a key on the keyboard. Attach it to focusable elements like <input> and <textarea>, or listen on document with addEventListener. It fires after keydown for the same key press. Common uses include simple live filters, reacting when Enter is released, and game controls. For value-based live search, oninput is often a better fit; use onkeyup when you specifically need the moment of key release.

What You’ll Learn

Purpose of onkeyup Attribute

The primary purpose of onkeyup is to run code when a key finishes its press — after the user lifts their finger. That timing can matter for shortcuts, toggles, or reading the final character in the field after it was added. Many tutorials use it for live search; reading input.value inside the handler updates results as the user types.

Because keyup fires for every key release (including Shift, Ctrl, and arrows), check event.key when you only care about certain keys. Debounce or throttle handlers if you call a server on every keyup to avoid flooding the network.

📝 Syntax

Set onkeyup on a focusable element, or assign element.onkeyup:

<input type="text" onkeyup="handleKeyUp(event)">

<script>
  function handleKeyUp(e) {
    console.log("Key released:", e.key);
  }
</script>

Syntax Rules

• Value is JavaScript executed when the keyup event fires.
• Works on focusable elements and via document.addEventListener("keyup", …).
• Fires after keydown for the same physical press.
• Pass event to read key, code, and modifier flags.
• Does not fire for paste-only value changes — use oninput for that.
• Modern alternative: element.addEventListener("keyup", handler).
• The keyup event bubbles.

💎 Values

The onkeyup attribute accepts a string of JavaScript code:

• onkeyup="handleKeyUp()" — Call a named function.
• onkeyup="searchFunction()" — Run search after key release.
• JavaScript: field.onkeyup = (e) => { … } assigns the handler.

searchInput.addEventListener("keyup", (e) => {
  if (e.key === "Enter") {
    runSearch(searchInput.value);
    return;
  }
  filterResults(searchInput.value);
});

Applicable Elements

onkeyup vs onkeydown vs oninput

Examples Gallery

Live filter on key release, addEventListener, and Enter to run search.

<label for="search">Search:</label>
<input type="text" id="search" onkeyup="searchFunction()">
<p id="searchResult"></p>

<script>
  const fruits = ["Apple", "Banana", "Orange"];

  function searchFunction() {
    const query = document.getElementById("search").value.toLowerCase();
    const matches = fruits.filter(f => f.toLowerCase().includes(query));
    document.getElementById("searchResult").textContent =
      matches.length ? "Results: " + matches.join(", ") : "No results";
  }
</script>

<input type="text" id="dynamicInput">

<script>
  document.getElementById("dynamicInput").addEventListener("keyup", function (e) {
    document.getElementById("log").textContent = "Key released: " + e.key;
  });
</script>

searchInput.addEventListener("keyup", (e) => {
  if (e.key === "Enter") {
    runSearch(searchInput.value.trim());
  }
});

♿ Accessibility

• Do not block Tab — Avoid preventDefault() on Tab in keyup handlers.
• Announce live results — Use aria-live="polite" on search result regions.
• Prefer native forms — Submit with a <button type="submit"> for keyboard users.
• Debounce API calls — Rapid keyups should not overwhelm users with flickering content.
• Document shortcuts — Tell users if Enter or Escape do something special.

💡 Best Practices