jQuery Keyup Event

What You’ll Learn

The keyup event fires when the user releases a key — once per press-and-release cycle, with no repeat while held. This tutorial covers .on("keyup"), event.which key codes, eventData, .trigger("keyup"), preventDefault for Enter, document-level shortcuts, and the official jQuery API demos.

Introduction

Sometimes you need to know when the user finished pressing a key — not when it first went down. The keyup event fires when a key comes back up, after the character has appeared in an input and after any keydown handlers have run.

The official jQuery API describes the keyup event (bound with .on("keyup") since 1.7) separately from the deprecated .keyup() method. To programmatically run keyup handlers, use .trigger("keyup") since jQuery 1.0. For catching actual text entry as characters, keypress or the native input event may fit better — but keyup is ideal for reacting after each key release.

Understanding the keyup Event

The keyup event is sent to an element when the user releases a key on the keyboard. It fires once per key release — not repeatedly while the key is held down.

It can be attached to any element, but the event is only delivered to the element that has focus. Form elements — <input>, <textarea>, and <select> — are always reasonable targets. For page-wide shortcut keys, attach the handler to document so bubbling brings every key release to your code.

📝 Syntax

The modern jQuery API for the keyup event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("keyup" [, eventData ], handler) (since 1.7)

.on( "keyup" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time keyup fires: function( event ) { ... }.

2. Event delegation — .on("keyup", selector, handler)

$( "#app" ).on( "keyup", "input", function( event ) {
  // runs when any input inside #app receives a keyup — including future ones
} );

Keyboard events bubble, so delegation on a parent container works for dynamic forms and lists of inputs.

3. Trigger the event — .trigger("keyup") (since 1.0)

.trigger( "keyup" )

• Runs bound keyup handlers on the matched element(s).
• Does not simulate a real OS key repeat — it fires handlers once per call.

4. Unbind — .off("keyup" [, selector] [, handler])

$( "#target" ).off( "keyup" );                 // remove all keyup handlers
$( "#app" ).off( "keyup", "input", fn );   // remove delegated handler

Official jQuery API examples

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

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

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Returning false from the handler can cancel default actions — same as preventDefault() + stopPropagation().

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 extend the official counter demo with keydown+keyup pairing, held-key tracking, and live updates on key release. Use the Try-it links to run each snippet in the browser.

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

Click inside #target, press and release a key → alert runs

Handler fires on keyup — when the key comes back up

Does NOT repeat while key is held (one keyup per release)

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

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

Click Trigger the handler → trigger("keyup") → alert runs

Same handler as releasing a real key in #target

Useful for testing keyboard logic without simulating OS input

var xTriggered = 0;

$( "#target" ).on( "keyup", function( event ) {
  xTriggered++;
  var msg = "Handler for `keyup` called " + xTriggered + " time(s).";
  $( "#log" ).prepend( "
" + msg + " Key: " + event.which + "
" );
} ).on( "keydown", function( event ) {
  if ( event.which == 13 ) {
    event.preventDefault();
  }
} );

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

Each keyup increments counter and logs event.which

Enter blocked on keydown (13) — keyup still fires on release

Trigger button also increments counter via .trigger("keyup")

var keysDown = {};

$( "#target" ).on( "keydown", function( event ) {
  keysDown[ event.which ] = true;
  $( "#down" ).text( "Keys held: " + Object.keys( keysDown ).join( ", " ) );
} ).on( "keyup", function( event ) {
  delete keysDown[ event.which ];
  $( "#up" ).text( "Key released: " + event.which );
  $( "#down" ).text( "Keys held: " + ( Object.keys( keysDown ).length ? Object.keys( keysDown ).join( ", " ) : "none" ) );
} );

Hold Space (32) → keydown repeats, keysDown tracks 32

Release Space → keyup fires once, key removed from keysDown

Pair both events for accurate "is key currently held?" state

$( "#search" ).on( "keyup", function( event ) {
  var len = $( this ).val().length;
  var lastKey = event.which === 8 ? "Backspace" : String.fromCharCode( event.which );
  $( "#status" ).text(
    "Length: " + len + " | Last key released: " + lastKey
  );
} );

Type "hello" → status updates after each key release

Value length reflects final input state (character already inserted)

For instant per-character updates, also consider the input event

🚀 Common Use Cases

• Post-keystroke validation — check field length or format after each key release on keyup.
• Hold detection — pair keydown + keyup to track which keys are currently held.
• Modifier release — detect when Shift or Ctrl is released via keyup on document.
• Live character counts — update UI after each key release in text fields.
• Live search — react on keyup after release (often paired with debounce).
• Debugging — log event.which during development to learn key codes.

📝 Notes

• Bind with .on("keyup", handler) since jQuery 1.7 — not the deprecated .keyup(handler) method.
• Trigger with .trigger("keyup") since jQuery 1.0.
• Event is sent only to the element with focus — click or tab into inputs first.
• Use event.which for key codes — jQuery normalizes cross-browser differences.
• keyup does not repeat while held — one event per key release.
• For global shortcuts, bind on document — events bubble up from focused children.
• For printable text input, consider the native input event — keyup fires after the character appears in the field.
• Use .off("keyup") to remove handlers — avoid deprecated .unbind("keyup").

💡 Best Practices