jQuery .keypress() Method

What You’ll Learn

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

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .keypress(), .keyup(), .click(), and more. The .keypress() method let you react to typed characters in one short call: $("#phone").keypress(function(e){ if(e.which<48||e.which>57){ e.preventDefault(); } }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .keypress() matters when reading older form validation and numeric-field 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("keypress", handler) for binding and .trigger("keypress") for firing.

Understanding the .keypress() Method

The official jQuery API describes .keypress() as a way to bind an event handler to the keypress 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 keypress event that .on("keypress") handles today.

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

📝 Syntax

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

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

.keypress( handler )

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

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

.keypress( [eventData], handler )

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

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

.keypress()

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

Official jQuery API migration note

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

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

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

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

Return value

• All .keypress() 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 .keypress() to .on("keypress"), and method chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .keypress(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

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

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

Arrow keys do NOT fire keypress

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

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

Focus #search, press a key → "Field: search | char code: 97" (for a)

eventData.fieldId passed without a closure

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

var count = 0;

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

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

Press a key in #target → count increments

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

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

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

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

Focus #legacy, press a key → legacy deprecation message

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

Behavior is identical — only the API name differs

$( "#target" )
  .keypress( function( event ) {
    if ( event.which === 13 ) {
      event.preventDefault();
    }
    $( "#notice" ).text( "First handler: Enter blocked." ).show();
  } )
  .keypress( function( event ) {
    $( "#result" ).text( "Second handler: char code " + event.which );
  } );

Press any key in #target

First handler shows #notice; Enter gets preventDefault

Second handler updates #result with event.which

Both handlers run in bind order on each keypress

🚀 Common Use Cases

• Reading legacy code — recognize $("#search").keypress(fn) as equivalent to .on("keypress", fn) in older scripts.
• Character filtering — legacy numeric fields bind .keypress() to allow digits only with event.which.
• Programmatic trigger — $("#target").keypress() from a test button — replace with .trigger("keypress").
• Shared eventData — $("#field").keypress({ id: "search" }, fn) passes metadata without closures.
• Live character preview — chained .keypress(fn) calls show typed characters with String.fromCharCode(event.which).
• Maintaining legacy form validation — many jQuery 1.x forms still use .keypress() — know how to migrate safely.

📝 Notes

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

💡 Best Practices