jQuery Keydown Event

What Is keydown?

The keydown event fires when the user presses a key. If the key stays down, it repeats at the OS key-repeat rate. Bind with .on("keydown") since jQuery 1.7; only the focused element receives it.

$("#target").on("keydown", handler)   // bind (1.7+)
$("#target").trigger("keydown")       // fire handlers (1.0+)

event.which → key code
  Enter 13 · Esc 27 · Space 32 · arrows 37–40 · A–Z 65–90

keydown → may repeat while held
keyup   → once when the key comes up

How to Use keydown

Focus a field, bind a handler, then read event.which.

1. Pick a focusable target — usually an <input> or <textarea>.
2. Bind with $("#target").on("keydown", handler) (jQuery 1.7+).
3. Read event.which; use preventDefault() when you block Enter or arrows.
4. For page-wide shortcuts, bind on document (events bubble).

Pseudocode

bind keydown on focused element

when user presses a key:
  keydown fires (and may repeat while held)
  code = event.which
  if code is Enter: preventDefault()   // optional
  react (shortcut, move, log…)

when user releases:
  keyup fires once

.trigger("keydown") → run handlers without a real press

Cheat Sheet

Keep these facts handy while wiring press handlers.

Live Preview

Focus the field and press a key. Hold it — keydown can repeat. Chips show common event.which codes.

$("#field").on("keydown", …)
→ press a key to see event.which

/* may repeat while held */

jQuery Examples

Short, copy-ready snippets from the official API style. Open DevTools Console, or use Try It Yourself for a live editor.

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

Focus #target, press a key →
Handler for keydown called.

(Hold → may repeat; arrows and Escape work too)

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

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

Click #other → trigger("keydown")
→ Handler for keydown called.

var count = 0;

$("#target").on("keydown", function (event) {
  if (event.which === 13) {
    event.preventDefault();
  }
  count++;
  $("#log").text(
    "Called " + count + " time(s). Key: " + event.which
  );
});

Press "A" → Called 1 time(s). Key: 65
Press Enter → Called 2 time(s). Key: 13
(Enter default blocked)

$(document).on("keydown", function (event) {
  if (event.which === 27) {
    console.log("Escape pressed — close UI");
  }
});

Press Esc (focus in the page) →
Escape pressed — close UI

$("#board").on("keydown", function (event) {
  var map = { 37: "left", 38: "up", 39: "right", 40: "down" };
  var dir = map[event.which];
  if (!dir) return;
  event.preventDefault();
  console.log("Move " + dir);
});

Focus #board, press ← →
Move left

(Hold → may repeat — good for continuous move)

Performance Notes

Keep keydown handlers light — held keys can fire many times per second. Debounce expensive search or network work.

Key Takeaways