14 | currentTarget:
15 | which:
16 | shiftKey:
17 | ctrlKey:
18 | altKey:
19 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #About
2 | **jQuery Hotkeys** is a plug-in that lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination.
3 |
4 | This plugin is based off of the plugin by Tzury Bar Yochay: [jQuery.hotkeys](https://github.com/tzuryby/jquery.hotkeys)
5 |
6 | The syntax is as follows:
7 |
8 | $(expression).bind(types, keys, handler);
9 | $(expression).unbind(types, handler);
10 |
11 | $(document).bind('keydown', 'ctrl+a', fn);
12 |
13 | // e.g. replace '$' sign with 'EUR'
14 | $('input.foo').bind('keyup', '$', function(){
15 | this.value = this.value.replace('$', 'EUR');
16 | });
17 |
18 | Syntax when wanting to use jQuery's `on()`/`off` methods:
19 |
20 | $(expression).on(types, null, keys, handler);
21 | $(expression).off(types, handler);
22 |
23 | $(document).on('keydown', null, 'ctrl+a', fn);
24 |
25 | // e.g. replace '$' sign with 'EUR'
26 | $('input.foo').on('keyup', null, '$', function(){
27 | this.value = this.value.replace('$', 'EUR');
28 | });
29 |
30 | ## Types
31 | Supported types are `'keydown'`, `'keyup'` and `'keypress'`
32 |
33 | ## Notes
34 |
35 | If you want to use more than one modifiers (e.g. alt+ctrl+z) you should define them by an alphabetical order e.g. alt+ctrl+shift
36 |
37 | Hotkeys aren't tracked if you're inside of an input element (unless you explicitly bind the hotkey directly to the input). This helps to avoid conflict with normal user typing.
38 |
39 | ## jQuery Compatibility
40 |
41 | Works with jQuery 1.4.2 and newer.
42 |
43 | It known to be working with all the major browsers on all available platforms (Win/Mac/Linux)
44 |
45 | * IE 6/7/8
46 | * FF 1.5/2/3
47 | * Opera-9
48 | * Safari-3
49 | * Chrome-0.2
50 |
51 | ### Addendum
52 |
53 | Firefox is the most liberal one in the manner of letting you capture all short-cuts even those that are built-in in the browser such as `Ctrl-t` for new tab, or `Ctrl-a` for selecting all text. You can always bubble them up to the browser by returning `true` in your handler.
54 |
55 | Others, (IE) either let you handle built-in short-cuts, but will add their functionality after your code has executed. Or (Opera/Safari) will *not* pass those events to the DOM at all.
56 |
57 | *So, if you bind `Ctrl-Q` or `Alt-F4` and your Safari/Opera window is closed don't be surprised.*
58 |
--------------------------------------------------------------------------------
/test-static-02.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
10 |
11 |
12 |
Test #01
13 |
14 |
15 | type 'ctrl+l ' to focus.
16 | type 'shift+3' to insert 'Shift#' into the text box.
17 | type 'a' inside the textbox and have 'b' inserted instead.
18 |
19 |
20 |
Test #02
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
88 |
--------------------------------------------------------------------------------
/jquery.hotkeys.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery Hotkeys Plugin
3 | * Copyright 2010, John Resig
4 | * Dual licensed under the MIT or GPL Version 2 licenses.
5 | *
6 | * Based upon the plugin by Tzury Bar Yochay:
7 | * http://github.com/tzuryby/hotkeys
8 | *
9 | * Original idea by:
10 | * Binny V A, http://www.openjs.com/scripts/events/keyboard_shortcuts/
11 | */
12 |
13 | /*
14 | * One small change is: now keys are passed by object { keys: '...' }
15 | * Might be useful, when you want to pass some other data to your handler
16 | */
17 |
18 | (function(jQuery){
19 |
20 | jQuery.hotkeys = {
21 | version: "0.8",
22 |
23 | specialKeys: {
24 | 8: "backspace", 9: "tab", 10: "return", 13: "return", 16: "shift", 17: "ctrl", 18: "alt", 19: "pause",
25 | 20: "capslock", 27: "esc", 32: "space", 33: "pageup", 34: "pagedown", 35: "end", 36: "home",
26 | 37: "left", 38: "up", 39: "right", 40: "down", 45: "insert", 46: "del",
27 | 96: "0", 97: "1", 98: "2", 99: "3", 100: "4", 101: "5", 102: "6", 103: "7",
28 | 104: "8", 105: "9", 106: "*", 107: "+", 109: "-", 110: ".", 111 : "/",
29 | 112: "f1", 113: "f2", 114: "f3", 115: "f4", 116: "f5", 117: "f6", 118: "f7", 119: "f8",
30 | 120: "f9", 121: "f10", 122: "f11", 123: "f12", 144: "numlock", 145: "scroll", 186: ";", 191: "/",
31 | 220: "\\", 222: "'", 224: "meta"
32 | },
33 |
34 | shiftNums: {
35 | "`": "~", "1": "!", "2": "@", "3": "#", "4": "$", "5": "%", "6": "^", "7": "&",
36 | "8": "*", "9": "(", "0": ")", "-": "_", "=": "+", ";": ": ", "'": "\"", ",": "<",
37 | ".": ">", "/": "?", "\\": "|"
38 | }
39 | };
40 |
41 | function keyHandler( handleObj ) {
42 | if ( typeof handleObj.data === "string" ) {
43 | handleObj.data = { keys: handleObj.data };
44 | }
45 |
46 | // Only care when a possible input has been specified
47 | if ( !handleObj.data || !handleObj.data.keys || typeof handleObj.data.keys !== "string" ) {
48 | return;
49 | }
50 |
51 | var origHandler = handleObj.handler,
52 | keys = handleObj.data.keys.toLowerCase().split(" "),
53 | textAcceptingInputTypes = ["text", "password", "number", "email", "url", "range", "date", "month", "week", "time", "datetime", "datetime-local", "search", "color", "tel"];
54 |
55 | handleObj.handler = function( event ) {
56 | // Don't fire in text-accepting inputs that we didn't directly bind to
57 | if ( !handleObj.data.allowInTextInputField && this !== event.target && (/textarea|select/i.test( event.target.nodeName ) ||
58 | jQuery.inArray(event.target.type, textAcceptingInputTypes) > -1 ) ) {
59 | return;
60 | }
61 |
62 | var special = jQuery.hotkeys.specialKeys[ event.keyCode ],
63 | // character codes are available only in keypress
64 | character = event.which > 0 && String.fromCharCode( event.which ).toLowerCase(),
65 | modif = "", possible = {};
66 |
67 | // check combinations (alt|ctrl|shift+anything)
68 | if ( event.altKey && special !== "alt" ) {
69 | modif += "alt+";
70 | }
71 |
72 | if ( event.ctrlKey && special !== "ctrl" ) {
73 | modif += "ctrl+";
74 | }
75 |
76 | // TODO: Need to make sure this works consistently across platforms
77 | if ( event.metaKey && !event.ctrlKey && special !== "meta" ) {
78 | modif += "meta+";
79 | }
80 |
81 | if ( event.shiftKey && special !== "shift" ) {
82 | modif += "shift+";
83 | }
84 |
85 | if ( special ) {
86 | possible[ modif + special ] = true;
87 | }
88 |
89 | if ( character ) {
90 | possible[ modif + character ] = true;
91 | possible[ modif + jQuery.hotkeys.shiftNums[ character ] ] = true;
92 |
93 | // "$" can be triggered as "Shift+4" or "Shift+$" or just "$"
94 | if ( modif === "shift+" ) {
95 | possible[ jQuery.hotkeys.shiftNums[ character ] ] = true;
96 | }
97 | }
98 |
99 | for ( var i = 0, l = keys.length; i < l; i++ ) {
100 | if ( possible[ keys[i] ] ) {
101 | return origHandler.apply( this, arguments );
102 | }
103 | }
104 | };
105 | }
106 |
107 | jQuery.each([ "keydown", "keyup", "keypress" ], function() {
108 | jQuery.event.special[ this ] = { add: keyHandler };
109 | });
110 |
111 | })( this.jQuery );
112 |
--------------------------------------------------------------------------------
/test-static-01.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
11 |
58 |
59 |
60 |
61 |