jQuery Keydown Event

What You’ll Learn

The keydown event fires when the user presses a key — and repeats while the key is held. This tutorial covers .on("keydown"), event.which key codes, eventData, .trigger("keydown"), preventDefault for Enter, document-level shortcuts, and the official jQuery API demos.

Introduction

Keyboard shortcuts, live search, games, and accessible widgets all start with one question: which key did the user press? The keydown event answers that question every time a key goes down — before the character appears in an input and before the key is released.

The official jQuery API distinguishes the keydown event (bound with .on("keydown") since 1.7) from the deprecated .keydown() method in older code. To programmatically run keydown handlers, use .trigger("keydown") since jQuery 1.0.

Understanding the keydown Event

The keydown event is sent to an element when the user presses a key on the keyboard. If the key is kept pressed, the event is sent every time the operating system repeats the key.

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 press to your code.

📝 Syntax

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

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

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

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

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

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

.trigger( "keydown" )

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

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

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

Official jQuery API examples

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

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

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, document shortcuts, and arrow-key navigation. Use the Try-it links to run each snippet in the browser.

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

Click inside #target input, press any key → alert runs

Handler fires on every keydown including arrows

Repeats while key is held (OS key repeat rate)

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

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

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

Same handler as pressing a real key in #target

Useful for testing keyboard logic without simulating OS input

var xTriggered = 0;

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

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

Each keydown increments counter and logs event.which

Enter (13) → preventDefault stops form submit side effects

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

$( "#open" ).on( "click", function() {
  $( "#panel" ).addClass( "is-open" );
} );

$( document ).on( "keydown", function( event ) {
  if ( event.which === 27 ) {
    $( "#panel" ).removeClass( "is-open" );
  }
} );

Open panel → panel visible

Press Escape anywhere → panel closes (event.which === 27)

Works even when focus is inside an input — bubbles to document

var $items = $( "#list li" );

$( "#list" ).on( "keydown", { wrap: true }, function( event ) {
  var $active = $items.filter( ".active" );
  var index = $items.index( $active );
  if ( event.which === 40 ) {
    event.preventDefault();
    index = Math.min( index + 1, $items.length - 1 );
  } else if ( event.which === 38 ) {
    event.preventDefault();
    index = Math.max( index - 1, 0 );
  } else {
    return;
  }
  $items.removeClass( "active" ).eq( index ).addClass( "active" );
  $( "#status" ).text( "Selected: " + $items.eq( index ).text() );
} ).attr( "tabindex", "0" ).focus();

Focus list (tabindex="0") → press Down (40) → next item .active

Press Up (38) → previous item

event.data.wrap available from eventData — extend for wrap-around

🚀 Common Use Cases

• Keyboard shortcuts — Ctrl+S save, Escape close modal — bind on document and filter event.which + modifiers.
• Enter to submit vs block — allow Enter in single-line search; preventDefault on Enter in multi-line editors.
• Games and demos — arrow keys and Space for movement — keydown repeats while held.
• Accessible widgets — roving tabindex lists, menus, and tabs driven by arrow keys.
• Live search — react on keydown for instant feedback (often paired with debounce).
• Debugging — log event.which during development to learn key codes.

📝 Notes

• Bind with .on("keydown", handler) since jQuery 1.7 — not the deprecated .keydown(handler) method.
• Trigger with .trigger("keydown") 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.
• Held keys repeat — throttle or debounce if handlers do heavy work.
• For global shortcuts, bind on document — events bubble up from focused children.
• For printable text input, consider the native input event or keypress — keydown fires before the character appears.
• Use .off("keydown") to remove handlers — avoid deprecated .unbind("keydown").

💡 Best Practices