Keyboard Shortcuts

Bind application-wide keyboard shortcuts with jQuery, respecting input field focus to avoid conflicts.

Example

$(document).on("keydown", function(e) {
  // Ignore when typing in input/textarea
  if ($(e.target).is("input,textarea,select,[contenteditable]")) return;
  const key = (e.ctrlKey || e.metaKey ? "ctrl+" : "") + (e.shiftKey ? "shift+" : "") + e.key.toLowerCase();
  const shortcuts = {
    "ctrl+k": () => $("#search").focus().select(),
    "ctrl+/": () => showShortcutHelp(),
    "?":      () => showShortcutHelp(),
    "g h":    () => navigate("/"),
    "escape": () => $(".modal.show").modal("hide"),
  };
  if (shortcuts[key]) { shortcuts[key](); e.preventDefault(); }
});

JAVASCRIPT

Full Editor

Pro Tip

Always ignore shortcuts when an input is focused — typing "g" should not trigger navigation.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned