jQuery .keyup() Method

What You’ll Learn

The .keyup() method is jQuery’s legacy shorthand for binding and triggering the keyup event. This tutorial covers .keyup(handler) since 1.0, .keyup(eventData, handler) since 1.4.3, no-argument .keyup() as a trigger, migration to .on("keyup") and .trigger("keyup"), and why the binding form is deprecated since jQuery 3.3. See the jQuery keyup event tutorial for the modern API.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .keyup(), .keydown(), .click(), and more. The .keyup() method let you react when keys are released in one short call: $("#search").keyup(function(){ updateCount(); }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .keyup() matters when reading older search fields and post-keystroke validation tutorials in legacy codebases. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("keyup", handler) for binding and .trigger("keyup") for firing.

Understanding the .keyup() Method

The official jQuery API describes .keyup() as a way to bind an event handler to the keyup event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the user presses a key while that element has focus — the same keyup event that .on("keyup") handles today.

When you call .keyup() with no arguments, jQuery synthetically fires the keyup event on each matched element. Bound handlers run once per call. This trigger behavior is equivalent to .trigger("keyup").

📝 Syntax

The .keyup() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("keyup") is preferred:

1. Bind a handler — .keyup( handler ) (since 1.0, deprecated 3.3)

.keyup( handler )

• handler — function executed each time keyup fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "keyup", handler ).

2. Bind with eventData — .keyup( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.keyup( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "keyup", eventData, handler ).

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

.keyup()

• No arguments — triggers keyup on every matched element.
• Runs bound keyup handlers.
• Preferred replacement: .trigger( "keyup" ).

Official jQuery API migration note

// Deprecated binding
$( "#target" ).keyup( function() {
  alert( "Handler for `keyup` called." );
} );

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

// Deprecated trigger
$( "#target" ).keyup();

// Modern trigger
$( "#target" ).trigger( "keyup" );

Return value

• All .keyup() signatures return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .keyup() to .on("keyup"), and method chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .keyup(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

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

Focus #target, type a letter or number → alert runs

Arrow keys do NOT fire keyup

Deprecated — prefer .on("keyup", fn) for new code

$( "#search" ).keyup( { fieldId: "search" }, function( event ) {
  $( "#out" ).text(
    "Field: " + event.data.fieldId + " | key code: " + event.which
  );
} );

Focus #search, press and release a key → "Field: search | key code: 65" (for A)

eventData.fieldId passed without a closure

Modern: .on("keyup", { fieldId: "search" }, fn)

var count = 0;

$( "#target" ).keyup( function( event ) {
  count++;
  $( "#out" ).text( "Target keyup handler fired (count: " + count + ")" );
} );

$( "#fire" ).click( function() {
  $( "#target" ).keyup();
} );

Press a key in #target → count increments

Click #fire → $("#target").keyup() → same handler runs

No-arg .keyup() is trigger shorthand — prefer .trigger("keyup")

$( "#legacy" ).keyup( function() {
  $( "#out" ).text( "Legacy: .keyup(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "keyup", function() {
  $( "#out" ).text( "Modern: .on('keyup', function(){ ... }) — use this for new code." );
} );

Focus #legacy, press a key → legacy deprecation message

Focus #modern, press a key → modern .on("keyup") message

Behavior is identical — only the API name differs

$( "#target" )
  .keyup( function( event ) {
    $( "#notice" ).text( "First handler: key " + event.which + " released." ).show();
  } )
  .keyup( function( event ) {
    $( "#result" ).text( "Second handler: field length " + $( "#target" ).val().length );
  } );

Press and release a key in #target

First handler shows released key code

Second handler updates field length after release

Both handlers run in bind order — once per keyup

🚀 Common Use Cases

• Reading legacy code — recognize $("#search").keyup(fn) as equivalent to .on("keyup", fn) in older scripts.
• Post-keystroke validation — legacy fields bind .keyup() to validate after each key release.
• Programmatic trigger — $("#target").keyup() from a test button — replace with .trigger("keyup").
• Shared eventData — $("#field").keyup({ id: "search" }, fn) passes metadata without closures.
• Live character counts — chained .keyup(fn) calls update UI after each key release.
• Maintaining legacy search UIs — many jQuery 1.x panels still use .keyup() — know how to migrate safely.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .keyup(handler) or .keyup(eventData, handler) in new code. Use .on("keyup") instead.
• Bind with .keyup(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .keyup() triggers the event since jQuery 1.0 — prefer .trigger("keyup").
• .keyup() does not support event delegation — use .on("keyup", "input", fn) for dynamic forms.
• Keyboard events require focus on the target element — click or tab into inputs first.
• Read key codes with event.which inside handlers — on keyup this is the typed character, not the physical key.
• Remove handlers with .off("keyup") — not by calling .keyup(undefined).
• For the full modern keyup guide — event.which key codes, keydown pairing, and release patterns — see the jQuery keyup event tutorial.

💡 Best Practices