jQuery Keyup Event

What Is keyup?

The keyup event fires when the user releases a key. It runs once per press-and-release — it does not repeat while held (unlike keydown). Bind with .on("keyup") since jQuery 1.7; the event reaches only the focused element.

$("#target").on("keyup", handler)   // bind (1.7+)
$("#target").trigger("keyup")       // fire handlers (1.0+)

event.which → key code (same idea as keydown)
  Enter 13 · Esc 27 · Space 32 · arrows 37–40 · A–Z 65–90

keydown → may repeat while held
keyup   → once when the key comes up

How to Use keyup

Focus a field, bind a handler, then react when the key comes up.

1. Pick a focusable target — usually an <input> or <textarea>.
2. Bind with $("#target").on("keyup", handler) (jQuery 1.7+).
3. Read event.which for the key code of the released key.
4. For page-wide shortcuts, bind on document (events bubble).

Pseudocode

bind keyup on focused element

when user presses a key:
  keydown may fire (and repeat while held)

when user releases the key:
  keyup fires once
  code = event.which          // key code
  react (validate, count, shortcut…)

.trigger("keyup") → run handlers without a real release

Cheat Sheet

Keep these facts handy while handling key release.

Live Preview

Focus the field and press a key. Hold it — keyup waits until you release. Chips show common event.which codes.

$("#field").on("keyup", …)
→ press and release a key to see event.which

/* keyup fires once — not while held */

jQuery Examples

Short, copy-ready snippets from the official API style. Open DevTools Console, or use Try It Yourself for a live editor.

$("#target").on("keyup", function () {
  console.log("Handler for keyup called.");
});

Focus #target, press and release a key →
Handler for keyup called.

(Fires on release — including arrows and Escape)

$("#target").on("keyup", function () {
  console.log("Handler for keyup called.");
});

$("#other").on("click", function () {
  $("#target").trigger("keyup");
});

Click #other → trigger("keyup")
→ Handler for keyup called.

var count = 0;

$("#target").on("keyup", function (event) {
  count++;
  $("#log").text(
    "Called " + count + " time(s). Key: " + event.which
  );
}).on("keydown", function (event) {
  if (event.which === 13) {
    event.preventDefault();
  }
});

Release "A" → Called 1 time(s). Key: 65
Release Enter → Called 2 time(s). Key: 13
(Enter default blocked on keydown)

var down = 0;
var up = 0;

$("#target")
  .on("keydown", function (event) {
    down++;
    $("#down").text("keydown: " + down + " (which " + event.which + ")");
  })
  .on("keyup", function (event) {
    up++;
    $("#up").text("keyup: " + up + " (which " + event.which + ")");
  });

Hold "A" briefly → keydown may be 5+, keyup is 1
Quick tap → both near 1
Same which code on both events

Performance Notes

keyup is lighter than keydown for held keys because it does not repeat. Still keep handlers small — debounce expensive search or network work.

Key Takeaways