├── README.textile ├── demo.html ├── jquery.mapkey.js └── jquery.mapkey.min.js /README.textile: -------------------------------------------------------------------------------- 1 | h1. mapKey 2 | 3 | a plugin for jQuery 4 | *created by:* Josh Pyles / "Pixelmatrix Design":http://pixelmatrixdesign.com 5 | *license:* "MIT License":http://www.opensource.org/licenses/mit-license.php 6 | 7 | h2. Usage 8 | 9 | Fire the href of a link with rel of "next" when the right arrow key is pressed: 10 | @$("a[rel='next']").mapKey("right");@ 11 | 12 | Fire a simple function when the down arrow key is pressed 13 | @$.mapKey("down", function(){ 14 | $(".hiddendiv").slideDown(); 15 | });@ 16 | 17 | Fire a jQuery trigger when a key is pressed 18 | @$("div").mapKey("down", {trigger: facebox.show});@ 19 | 20 | h2. Key shortcuts 21 | 22 | * You can use the keycodes if you want, but here are some helpful shortcut strings i've made: 23 | * All of the letter keys are available in their lowercase form (a-z) 24 | * Any of the numbers are available as themselves (0-9). This syntax specifies numpad & regular numerals 25 | * F1-F12 are lowercase: f1, f2, f3, etc 26 | * Numpad numbers are available as num1, num2, num3, etc 27 | * Regular numbers are available as top1, top2, top3, etc 28 | * Arrow keys available as left, right, up, and down 29 | * Backspace: "back" 30 | * Tab: "tab" 31 | * Enter: "enter" 32 | * Shift: "shift" 33 | * Control: "ctrl" 34 | * Alt/Option "alt" or "opt" 35 | * Pause: "pause" 36 | * Caps Lock: "caps" 37 | * Escape: "esc" 38 | * Space bar: "space" 39 | * Page up: "pgup" 40 | * Page down: "pgdown" 41 | * End: "end" 42 | * Home: "home" 43 | * Insert: "insert" 44 | * Delete: "del" 45 | * Windows key: "windows" (will target left or right windows buttons) 46 | * Command key: "cmd" (will target left or right command buttons) _same thing as windows key._ 47 | * Left Windows key: "lwindows" 48 | * Right Windows key: "rwindwows" 49 | * Left Command key: "lcmd" 50 | * Right Command key: "rcmd" 51 | (Please note: doesn't matter if you use windows or command shortcut, it will work as windows in windows and command in mac) 52 | * Select: "select" 53 | * Numpad Multiply (asterisk): "multiply" 54 | * Numpad Add (+): "add" 55 | * Numpad Subtract: "subtract" 56 | * Numpad Decimal point: "decimalpt" 57 | * Numpad Divide (/): "divide" 58 | * Numlock: "numlock" 59 | * Scroll Lock: "scrolllock" 60 | * Semicolon: ";" 61 | * Equals: "=" 62 | * Comma: "," 63 | * Hyphen/Dash: "-" 64 | * Period: "." 65 | * Slash: "/" 66 | * Accent: "`" 67 | * Open Bracket: "[" 68 | * Close Bracket: "]" 69 | * Backslash (\): "backslash" 70 | * Single Quote ('): "singlequote" 71 | 72 | h2. Enable / Disable 73 | 74 | 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. 75 | 76 | h2. Direction parameter 77 | 78 | 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: 79 | 80 | @$.mapKey("left", function(){ 81 | loadNextPage(); 82 | }, {direction: "down"});@ 83 | 84 | h2. More advanced stuff 85 | 86 | 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":http://github.com/jeresig/jquery.hotkeys. That can handle things like key combinations and more. 87 | -------------------------------------------------------------------------------- /demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | mapKey Test 9 | 10 | 11 | 77 | 120 | 121 | 122 | 123 |

Testing mapKey

124 |

Navigate with ↑ & ↓ (arrow keys) or by pressing the cooresponding number.

125 |

toggle keyboard navigation (or press d): enabled

126 | 135 |
136 | 137 |

View on Github »

138 | 139 | 140 | -------------------------------------------------------------------------------- /jquery.mapkey.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Map Key v0.7 4 | Copyright © 2010 Josh Pyles / Pixelmatrix Design LLC 5 | http://pixelmatrixdesign.com 6 | 7 | Requires jQuery 1.3 or newer 8 | 9 | License: 10 | MIT License - http://www.opensource.org/licenses/mit-license.php 11 | 12 | Usage: 13 | 14 | $("a#left").mapKey("left"); 15 | 16 | $("a#left").mapKey(37); (use keycodes too!) 17 | 18 | $.mapKey("left", function(){ 19 | alert("you hit the left arrow!"); 20 | }); 21 | 22 | Parameters: 23 | trigger: (function) - trigger a jQuery event 24 | direction: "up"/"down" - use keydown or keyup event 25 | 26 | Enjoy! 27 | 28 | */ 29 | 30 | (function($) { 31 | $.mapKey = function(key, newfunc, options){ 32 | //grab the opts 33 | var o = $.extend({}, $.fn.mapKey.defaults, options); 34 | //store a binding 35 | $.fn.mapKey.storeBinding(key, newfunc, o.direction); 36 | } 37 | $.fn.mapKey = function(key, options) { 38 | //debug(this); 39 | // build main options before element iteration 40 | var opts = $.extend({}, $.fn.mapKey.defaults, options); 41 | // iterate and setup each matched element 42 | return this.each(function() { 43 | var $this = $(this); 44 | // build element specific options 45 | var o = $.meta ? $.extend({}, opts, $this.data()) : opts; 46 | var t = ""; 47 | var action; 48 | 49 | //check for a trigger 50 | if (o.trigger) { 51 | action = function() { $this.trigger(o.trigger); }; 52 | }else if($this.is("a[href]")){ 53 | action = function() { window.location = $this.attr("href"); }; 54 | } 55 | 56 | //store a binding 57 | $.fn.mapKey.storeBinding(key, action, o.direction); 58 | 59 | }); 60 | }; 61 | // 62 | // define and expose our functions 63 | // 64 | $.fn.mapKey.storeBinding = function(key, value, e){ 65 | if(typeof key == "number"){ 66 | //we have all we need already! 67 | if(e == "up"){ 68 | $.fn.mapKey.bindings.up[key] = value; 69 | }else{ 70 | $.fn.mapKey.bindings.down[key] = value; 71 | } 72 | }else{ 73 | //get keycode from key database 74 | var code = $.fn.mapKey.keys[key]; 75 | //see if we need to store one or more bindings 76 | if(typeof code == "number"){ 77 | //add a single binding 78 | if(e == "up"){ 79 | $.fn.mapKey.bindings.up[code.toString()] = value; 80 | }else{ 81 | $.fn.mapKey.bindings.down[code.toString()] = value; 82 | } 83 | }else if(typeof code == "object"){ 84 | //add multiple bindings for each version of the key 85 | $.each(code, function(i, v){ 86 | if(e == "up"){ 87 | $.fn.mapKey.bindings.up[v.toString()] = value; 88 | }else{ 89 | $.fn.mapKey.bindings.down[v.toString()] = value; 90 | } 91 | }); 92 | } 93 | } 94 | } 95 | $.fn.mapKey.kdown = function(e){ 96 | //if keyboard nav is enabled 97 | if($.fn.mapKey.enabled){ 98 | //figure out the code of the key pressed 99 | var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; 100 | 101 | if(!$(e.target).is("input, textarea, select")){ 102 | //check the bindings for the current pressed key 103 | var value = $.fn.mapKey.bindings.down[key]; 104 | 105 | if (value) { 106 | if(typeof value == "string"){ 107 | //lets navigate to the href 108 | window.location = value; 109 | }else if(typeof value == "function"){ 110 | //it's a function. let's execute it! 111 | value(); 112 | } 113 | e.preventDefault(); 114 | } 115 | 116 | if($.fn.mapKey.bindings.up[key] != undefined){ 117 | e.preventDefault(); 118 | } 119 | } 120 | } 121 | } 122 | $.fn.mapKey.kup = function(e){ 123 | //if keyboard nav is enabled 124 | if($.fn.mapKey.enabled){ 125 | //figure out the code of the key pressed 126 | 127 | if(!$(e.target).is("input, textarea, select")){ //check if you are in an input 128 | var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; 129 | 130 | //check the bindings for the current pressed key 131 | var value = $.fn.mapKey.bindings.up[key]; 132 | 133 | if (value) { 134 | if(typeof value == "string"){ 135 | //lets navigate to the href 136 | window.location = value; 137 | }else if(typeof value == "function"){ 138 | //it's a function. let's execute it! 139 | value(); 140 | } 141 | e.preventDefault(); 142 | } 143 | } 144 | } 145 | } 146 | $.fn.mapKey.enable = function(){ 147 | //enable mapKey 148 | $.fn.mapKey.enabled = true; 149 | } 150 | $.fn.mapKey.disable = function(){ 151 | //disable mapKey 152 | $.fn.mapKey.enabled = false; 153 | } 154 | // 155 | // plugin defaults 156 | // 157 | $.fn.mapKey.defaults = { 158 | trigger: undefined, 159 | direction: "up" 160 | }; 161 | // 162 | // public variables 163 | // 164 | $.fn.mapKey.enabled = true; 165 | $.fn.mapKey.bindings = { up: {}, down: {}}; 166 | $.fn.mapKey.keys = { 167 | "back": 8, 168 | "tab": 9, 169 | "enter": 13, 170 | "shift": 16, 171 | "ctrl": 17, 172 | "alt": 18, 173 | "opt": 18, 174 | "pause": 19, 175 | "caps": 20, 176 | "esc": 27, 177 | "space": 32, 178 | "pgup": 33, 179 | "pgdown": 34, 180 | "end": 35, 181 | "home": 36, 182 | "left": 37, 183 | "up": 38, 184 | "right": 39, 185 | "down": 40, 186 | "insert": 45, 187 | "del": 46, 188 | "top0": 48, 189 | "top1": 49, 190 | "top2": 50, 191 | "top3": 51, 192 | "top4": 52, 193 | "top5": 53, 194 | "top6": 54, 195 | "top7": 55, 196 | "top8": 56, 197 | "top9": 57, 198 | "0": [48, 96], 199 | "1": [49, 97], 200 | "2": [50, 98], 201 | "3": [51, 99], 202 | "4": [52, 100], 203 | "5": [53, 101], 204 | "6": [54, 102], 205 | "7": [55, 103], 206 | "8": [56, 104], 207 | "9": [57, 105], 208 | "a": 65, 209 | "b": 66, 210 | "c": 67, 211 | "d": 68, 212 | "e": 69, 213 | "f": 70, 214 | "g": 71, 215 | "h": 72, 216 | "i": 73, 217 | "j": 74, 218 | "k": 75, 219 | "l": 76, 220 | "m": 77, 221 | "n": 78, 222 | "o": 79, 223 | "p": 80, 224 | "q": 81, 225 | "r": 82, 226 | "s": 83, 227 | "t": 84, 228 | "u": 85, 229 | "v": 86, 230 | "w": 87, 231 | "x": 88, 232 | "y": 89, 233 | "z": 90, 234 | "lwindows": 91, 235 | "rwindows": 92, 236 | "windows": [91,92], 237 | "lcmd": 91, 238 | "rcmd": 92, 239 | "cmd": [91,92], 240 | "select": 93, 241 | "num0": 96, 242 | "num1": 97, 243 | "num2": 98, 244 | "num3": 99, 245 | "num4": 100, 246 | "num5": 101, 247 | "num6": 102, 248 | "num7": 103, 249 | "num8": 104, 250 | "num9": 105, 251 | "multiply": 106, 252 | "add": 107, 253 | "subtract": 109, 254 | "decimalpt": 110, 255 | "divide": 111, 256 | "f1": 112, 257 | "f2": 113, 258 | "f3": 114, 259 | "f4": 115, 260 | "f5": 116, 261 | "f6": 117, 262 | "f7": 118, 263 | "f8": 119, 264 | "f9": 120, 265 | "f10": 121, 266 | "f11": 122, 267 | "f12": 123, 268 | "numlock": 144, 269 | "scrolllock": 145, 270 | ";": 186, 271 | "=": 187, 272 | ",": 188, 273 | "-": 189, 274 | ".": 190, 275 | "/": 191, 276 | "`": 192, 277 | "[": 219, 278 | "backslash": 220, 279 | "]": 221, 280 | "singlequote": 222 281 | }; 282 | 283 | //bind event listeners 284 | $(document).bind("keyup", $.fn.mapKey.kup); 285 | $(document).bind("keydown", $.fn.mapKey.kdown); 286 | })(jQuery); -------------------------------------------------------------------------------- /jquery.mapkey.min.js: -------------------------------------------------------------------------------- 1 | (function(a){a.mapKey=function(c,d,b){var e=a.extend({},a.fn.mapKey.defaults,b);a.fn.mapKey.storeBinding(c,d,e.direction)};a.fn.mapKey=function(c,b){var d=a.extend({},a.fn.mapKey.defaults,b);return this.each(function(){var g=a(this);var h=a.meta?a.extend({},d,g.data()):d;var e="";var f;if(h.trigger){f=function(){g.trigger(h.trigger)}}else{if(g.is("a[href]")){f=function(){window.location=g.attr("href")}}}a.fn.mapKey.storeBinding(c,f,h.direction)})};a.fn.mapKey.storeBinding=function(b,d,f){if(typeof b=="number"){if(f=="up"){a.fn.mapKey.bindings.up[b]=d}else{a.fn.mapKey.bindings.down[b]=d}}else{var c=a.fn.mapKey.keys[b];if(typeof c=="number"){if(f=="up"){a.fn.mapKey.bindings.up[c.toString()]=d}else{a.fn.mapKey.bindings.down[c.toString()]=d}}else{if(typeof c=="object"){a.each(c,function(g,e){if(f=="up"){a.fn.mapKey.bindings.up[e.toString()]=d}else{a.fn.mapKey.bindings.down[e.toString()]=d}})}}}};a.fn.mapKey.kdown=function(d){if(a.fn.mapKey.enabled){var b=d.charCode?d.charCode:d.keyCode?d.keyCode:0;if(!a(d.target).is("input, textarea, select")){var c=a.fn.mapKey.bindings.down[b];if(c){if(typeof c=="string"){window.location=c}else{if(typeof c=="function"){c()}}d.preventDefault()}if(a.fn.mapKey.bindings.up[b]!=undefined){d.preventDefault()}}}};a.fn.mapKey.kup=function(d){if(a.fn.mapKey.enabled){if(!a(d.target).is("input, textarea, select")){var b=d.charCode?d.charCode:d.keyCode?d.keyCode:0;var c=a.fn.mapKey.bindings.up[b];if(c){if(typeof c=="string"){window.location=c}else{if(typeof c=="function"){c()}}d.preventDefault()}}}};a.fn.mapKey.enable=function(){a.fn.mapKey.enabled=true};a.fn.mapKey.disable=function(){a.fn.mapKey.enabled=false};a.fn.mapKey.defaults={trigger:undefined,direction:"up"};a.fn.mapKey.enabled=true;a.fn.mapKey.bindings={up:{},down:{}};a.fn.mapKey.keys={back:8,tab:9,enter:13,shift:16,ctrl:17,alt:18,opt:18,pause:19,caps:20,esc:27,space:32,pgup:33,pgdown:34,end:35,home:36,left:37,up:38,right:39,down:40,insert:45,del:46,top0:48,top1:49,top2:50,top3:51,top4:52,top5:53,top6:54,top7:55,top8:56,top9:57,"0":[48,96],"1":[49,97],"2":[50,98],"3":[51,99],"4":[52,100],"5":[53,101],"6":[54,102],"7":[55,103],"8":[56,104],"9":[57,105],a:65,b:66,c:67,d:68,e:69,f:70,g:71,h:72,i:73,j:74,k:75,l:76,m:77,n:78,o:79,p:80,q:81,r:82,s:83,t:84,u:85,v:86,w:87,x:88,y:89,z:90,lwindows:91,rwindows:92,windows:[91,92],lcmd:91,rcmd:92,cmd:[91,92],select:93,num0:96,num1:97,num2:98,num3:99,num4:100,num5:101,num6:102,num7:103,num8:104,num9:105,multiply:106,add:107,subtract:109,decimalpt:110,divide:111,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123,numlock:144,scrolllock:145,";":186,"=":187,",":188,"-":189,".":190,"/":191,"`":192,"[":219,backslash:220,"]":221,singlequote:222};a(document).bind("keyup",a.fn.mapKey.kup);a(document).bind("keydown",a.fn.mapKey.kdown)})(jQuery); --------------------------------------------------------------------------------