jQuery Keyboard Events

What You’ll Learn

Keyboard events let JavaScript respond when users type, navigate with arrow keys, or press shortcuts. jQuery’s .on() and .off() provide a consistent API. Start with the keydown event — it fires for every key press and repeats while a key is held down.

Introduction

Search boxes, games, modal dialogs, and productivity apps all depend on keyboard input. The browser fires keyboard events on the element that currently has focus — usually an input, textarea, or the document itself for global shortcuts.

What Are jQuery Keyboard Events?

Keyboard events are named strings passed to .on() — "keydown", "keyup", and "keypress". The handler receives an event object with normalized properties like event.which (key code), event.shiftKey, and event.ctrlKey. Unlike deprecated shortcuts like .keydown(fn), .on("keydown", fn) is the modern approach.

📝 Syntax

Minimal keydown binding workflow:

$("#search").on("keydown", function(event) {
  if (event.which === 13) { /* Enter */ }
});
$("#target").trigger("keydown");
$(document).on("keydown", function(event) {
  if (event.which === 27) { /* Escape — global */ }
});