a plugin for jQuery
created by: Josh Pyles / Pixelmatrix Design
license: MIT License


Fire the href of a link with rel of “next” when the right arrow key is pressed:

Fire a simple function when the down arrow key is pressed
$.mapKey("down", function(){

Fire a jQuery trigger when a key is pressed
$("div").mapKey("down", {trigger:});

Key shortcuts

  • You can use the keycodes if you want, but here are some helpful shortcut strings i’ve made:
  • All of the letter keys are available in their lowercase form (a-z)
  • Any of the numbers are available as themselves (0-9). This syntax specifies numpad & regular numerals
  • F1-F12 are lowercase: f1, f2, f3, etc
  • Numpad numbers are available as num1, num2, num3, etc
  • Regular numbers are available as top1, top2, top3, etc
  • Arrow keys available as left, right, up, and down
  • Backspace: “back”
  • Tab: “tab”
  • Enter: “enter”
  • Shift: “shift”
  • Control: “ctrl”
  • Alt/Option “alt” or “opt”
  • Pause: “pause”
  • Caps Lock: “caps”
  • Escape: “esc”
  • Space bar: “space”
  • Page up: “pgup”
  • Page down: “pgdown”
  • End: “end”
  • Home: “home”
  • Insert: “insert”
  • Delete: “del”
  • Windows key: “windows” (will target left or right windows buttons)
  • Command key: “cmd” (will target left or right command buttons) same thing as windows key.
  • Left Windows key: “lwindows”
  • Right Windows key: “rwindwows”
  • Left Command key: “lcmd”
  • Right Command key: “rcmd”
    (Please note: doesn’t matter if you use windows or command shortcut, it will work as windows in windows and command in mac)
  • Select: “select”
  • Numpad Multiply (asterisk): “multiply”
  • Numpad Add (+): “add”
  • Numpad Subtract: “subtract”
  • Numpad Decimal point: “decimalpt”
  • Numpad Divide (/): “divide”
  • Numlock: “numlock”
  • Scroll Lock: “scrolllock”
  • Semicolon: “;”
  • Equals: “=”
  • Comma: “,”
  • Hyphen/Dash: “-”
  • Period: “.”
  • Slash: “/”
  • Accent: “`”
  • Open Bracket: “[”
  • Close Bracket: “]”
  • Backslash (\): “backslash”
  • Single Quote (’): “singlequote”

Enable / Disable

There may be times when you want the entire keyboard to be available for typing (such as forms). It’s simple to enable or disable mapKey. Simply call $.fn.mapKey.disable(); and $.fn.mapKey.enable(); to enable it once again.

Direction parameter

You have the option to fire events on keydown or keyup. Default is keyup. keydown gets fired multiple times if you hold down the button. That can be useful if you’re using the arrow keys. Set the option when you call mapKey:

$.mapKey("left", function(){
}, {direction: "down"});

More advanced stuff

This plugin is meant to be a very light one. If you need to do more advanced things, I suggest trying jeresig’s plugin jQuery.hotkeys. That can handle things like key combinations and more.


View Github