jQuery Keypress Event

What Is keypress?

The keypress event fires when the browser registers printable character input. Unlike keydown, modifiers and non-printing keys (Shift, Esc, Delete) usually do not trigger it. Bind with .on("keypress") (since jQuery 1.7); the event reaches only the focused element.

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

event.which → character code
  "a" → 97    "A" → 65    Enter → 13

arrows / Shift / Esc → usually NO keypress
(use keydown instead)

How to Use keypress

Focus a field, bind a handler, then read event.which when a character is typed.

1. Pick a focusable target — usually an <input> or <textarea>.
2. Bind with $("#target").on("keypress", handler) (jQuery 1.7+).
3. Inside the handler, read event.which for the character code.
4. Call event.preventDefault() when you need to block a character (for example Enter).

Pseudocode

bind keypress on focused element

when user types a printable character:
  code = event.which          // character code
  if code is Enter (13):
    preventDefault()          // optional block
  else:
    use code / fromCharCode(code)

when user presses arrow / Shift / Esc:
  keypress usually does NOT fire
  → use keydown instead

Cheat Sheet

Keep these facts handy while handling typed characters.

Live Preview

Focus the field and type a printable character. See event.which update live — arrows will not fire keypress.

$("#field").on("keypress", …)
→ type a printable key to see event.which

/* arrows / Shift do not fire keypress */

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("keypress", function () {
  console.log("Handler for keypress called.");
});

Focus #target, type a letter →
Handler for keypress called.

(Arrow keys / Shift do not fire keypress)

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

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

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

var count = 0;

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

Type "a" → Called 1 time(s). Char: 97
Type "A" → Called 2 time(s). Char: 65
Press Enter → preventDefault (no submit)

$("#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: 65
Press arrow → keydown updates; keypress stays

Performance Notes

Handlers are cheap if they stay small. Avoid heavy DOM work on every keystroke; debounce live search. Prefer input when you care about the field value, not each physical key.

Key Takeaways