jQuery Keypress Event

What You’ll Learn

The keypress event fires when the browser registers printable keyboard input — the character the user is typing. This tutorial covers .on("keypress"), event.which character codes, eventData, .trigger("keypress"), preventDefault for Enter, keypress vs keydown, and the official jQuery API demos.

Introduction

When you need to react to typed characters — not arrow keys or Shift — the keypress event is a classic hook. It fires when the browser registers keyboard input that produces a character, similar to keydown but narrower in scope.

The official jQuery API notes that keypress is not covered by any official specification — actual behavior may differ across browsers, versions, and platforms. Bind the modern event with .on("keypress") since 1.7 and trigger with .trigger("keypress") since jQuery 1.0.

Understanding the keypress Event

The keypress event is sent to an element when the browser registers keyboard input. It is similar to keydown, except that modifier and non-printing keys such as Shift, Esc, and Delete trigger keydown but not keypress.

It can be attached to any element, but the event is only delivered to the element that has focus. Form controls — <input> and <textarea> — are always reasonable targets.

📝 Syntax

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

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

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

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

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

$( "#app" ).on( "keypress", "input", function( event ) {
  // runs when any input inside #app receives a keypress — 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("keypress") (since 1.0)

.trigger( "keypress" )

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

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

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

Official jQuery API examples

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

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

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 character-code comparison and a digits-only filter. Use the Try-it links to run each snippet in the browser.

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

Focus #target, type a letter or number → console logs handler message

Arrow keys and Shift do NOT fire keypress (use keydown instead)

Open DevTools Console to see output

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

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

Click Trigger the handler → trigger("keypress") → console log runs

Same handler as typing a printable character in #target

Useful for testing keypress logic in unit demos

var xTriggered = 0;

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

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

Each printable key increments counter and logs event.which (character code)

Type "a" → Char: 97 | Type "A" → Char: 65

Enter (13) → preventDefault | Trigger button also increments

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

Type lowercase "a" → keypress: 97, keydown: 65

Type uppercase "A" → both report 65

Press arrow key → keydown updates, keypress does not fire

$( "#phone" ).on( "keypress", { min: 48, max: 57 }, function( event ) {
  var code = event.which;
  if ( code < event.data.min || code > event.data.max ) {
    event.preventDefault();
    $( "#warn" ).text( "Digits 0-9 only." );
  } else {
    $( "#warn" ).text( "" );
  }
} );

Type "5" → allowed (char code 53)

Type "a" → preventDefault, warning shown

event.data.min/max from eventData — codes 48-57 are 0-9

🚀 Common Use Cases

• Numeric-only fields — filter digits on keypress with event.which between 48 and 57.
• Live character preview — show the typed character with String.fromCharCode(event.which).
• Enter to submit vs block — preventDefault on Enter (char code 13) in single-line inputs.
• Legacy form validation — older tutorials bind keypress to restrict allowed characters.
• Learning character codes — compare keypress vs keydown side by side while debugging.
• Reading old codebases — recognize .on("keypress") before migrating to input or keydown.

📝 Notes

• Bind with .on("keypress", handler) since jQuery 1.7 — not the deprecated .keypress(handler) method.
• Trigger with .trigger("keypress") since jQuery 1.0.
• Not in any official DOM spec — behavior may differ across browsers and platforms.
• Event is sent only to the element with focus.
• event.which on keypress is the character code — lowercase a = 97, not 65.
• Arrow keys, Shift, Ctrl, Escape do not fire keypress — use keydown.
• For modern text fields, consider the native input event instead of keypress.
• Use .off("keypress") to remove handlers.

💡 Best Practices