Add keyboard shortcuts to any element in your page easy. Are you working on module where you have to integrate shortcut keys for quick actions or making web based games then this jQuery Shortcut Keys Plugin will be very useful for you. To assign a shortcut to an element you should only use the setShortcutKey() function, this function has the following parameters:
| mod | Defines the modifier key, in case a combination is not used, the value NULL is used as a parameter |
| key | Defines the key to be used for the shortcut |
| func | Defines the function that will be assigned to the shortcut |
Libraries
Include jquery core library with jquery Query.ShortcutKeys.js
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" > script> <script src="JQuery.ShortcutKeys.js">script> |
Here is the example for adding shortcut key on selected element.
$("#ejemplo").setShortcutKey( ALT , RETURN , function() { alert("Hola mundo"); } ); |
The above exmaple shows how the shortcut method, defined with the key combination ALT + RETURN element:
, would be set in the #example
You can also set the key code as shown below and the result will remain the same:
$("#helloworld").setShortcutKey( 18 , 13 , function() { alert("Hello World."); } ); |
List of all supporting keycodes:
| Constant | Key Code | Key Name |
|---|---|---|
| BACK_SPACE | 8 | BACKSPACE |
| TAB | 9 | TAB |
| RETURN | 13 | ENTER |
| SHIFT | 16 | SHIFT |
| CONTROL | 17 | CTRL |
| ALT | 18 | ALT |
| PAUSE | 19 | PAUSE/BREAK |
| CAPS_LOCK | 20 | CAPS LOCK |
| ESCAPE | 27 | ESCAPE |
| PAGE_UP | 33 | PAGE UP |
| PAGE_DOWN | 34 | PAGE DOWN |
| END | 35 | END |
| HOME | 36 | HOME |
| LEFT | 37 | LEFT ARROW |
| UP | 38 | UP ARROW |
| RIGHT | 39 | RIGHT ARROW |
| DOWN | 40 | DOWN ARROW |
| INSERT | 45 | INSERT |
| DELETE | 46 | DELETE |
| N0 | 48 | 0 |
| N1 | 49 | 1 |
| N2 | 50 | 2 |
| N3 | 51 | 3 |
| N4 | 52 | 4 |
| N5 | 53 | 5 |
| N6 | 54 | 6 |
| N7 | 55 | 7 |
| N8 | 56 | 8 |
| N9 | 57 | 9 |
| A | 65 | A |
| B | 66 | B |
| C | 67 | C |
| D | 68 | D |
| E | 69 | E |
| F | 70 | F |
| G | 71 | G |
| H | 72 | H |
| I | 73 | I |
| J | 74 | J |
| K | 75 | K |
| L | 76 | L |
| M | 77 | M |
| N | 78 | N |
| O | 79 | O |
| P | 80 | P |
| Q | 81 | Q |
| R | 82 | R |
| S | 83 | S |
| T | 84 | T |
| U | 85 | U |
| V | 86 | V |
| W | 87 | W |
| X | 88 | X |
| Y | 89 | Y |
| Z | 90 | Z |
| WIN | 91 | LEFT WINDOW KEY |
| WIN | 92 | RIGHT WINDOW KEY |
| CONTEXT_MENU | 93 | SELECT KEY |
| NUMPAD0 | 96 | NUMPAD 0 |
| NUMPAD1 | 97 | NUMPAD 1 |
| NUMPAD2 | 98 | NUMPAD 2 |
| NUMPAD3 | 99 | NUMPAD 3 |
| NUMPAD4 | 100 | NUMPAD 4 |
| NUMPAD5 | 101 | NUMPAD 5 |
| NUMPAD6 | 102 | NUMPAD 6 |
| NUMPAD7 | 103 | NUMPAD 7 |
| NUMPAD8 | 104 | NUMPAD 8 |
| NUMPAD9 | 105 | NUMPAD 9 |
| MULTIPLY | 106 | MULTIPLY |
| ADD | 107 | ADD |
| SUBTRACT | 109 | SUBTRACT |
| DECIMAL | 110 | DECIMAL POINT |
| DIVIDE | 111 | DIVIDE |
| F1 | 112 | F1 |
| F2 | 113 | F2 |
| F3 | 114 | F3 |
| F4 | 115 | F4 |
| F5 | 116 | F5 |
| F6 | 117 | F6 |
| F7 | 118 | F7 |
| F8 | 119 | F8 |
| F9 | 120 | F9 |
| F10 | 121 | F10 |
| F11 | 122 | F11 |
| F12 | 123 | F12 |
| NUM_LOCK | 144 | NUM LOCK |
| SCROLL_LOCK | 145 | SCROLL LOCK |
| VOLUME_UP | 186 | SEMI-COLON |
| VOLUME_UP | 187 | EQUAL SIGN |
| COMMA | 188 | COMMA |
| COMMA | 189 | DASH |
| PERIOD | 190 | PERIOD |
| SLASH | 191 | FORWARD SLASH |
| BACK_QUOTE | 192 | GRAVE ACCENT |
| OPEN_BRACKET | 219 | OPEN BRACKET |
| BACK_SLASH | 220 | BACK SLASH |
| CLOSE_BRACKET | 221 | CLOSE BRAKET |
| QUOTE | 222 | SINGLE QUOTE |
See live demo and download source code.
This awesome script developed by rogeldm, Visit their official github repository for more information and follow for future updates.
