Updated April 5, 2023
Introduction to jQuery keycode
jQuery key code is used to the mapping of keycodes to their numeric values. Key codes are the keyboard keys to which have digital values mapped to the keys based on the key code description. jQuery keycode is a part of Themes in jQuery UI API category, there are many more API’s like disableSelection(), enableSelection(), .uniqueId(), .zIndex(), .focus() provided by jQuery.ui.core.js function in jQuery UI. This jQuery UI was built upon jQuery JavaScript’s library for User Interface, Effects, Themes, Widgets, and User Interaction. The recommended version of jQuery UI is v1.10. Let’s have a look at Syntax and how jQuery keycodes work.
Syntax:
jQuery.ui.keyCodeThere is no need for parameters to be sent to keycode syntax
Before getting into examples of jQuery keycode, we need to know KeyCodes Table.
| KeyCode | Description/ Numeric value |
| Backspace | 8 |
| Tab | 9 |
| Enter | 13 |
| Shift | 16 |
| CTRL | 17 |
| ALT | 18 |
| Pause/ Break | 19 |
| Caps Lock | 20 |
| ESC | 27 |
| Page Up | 33 |
| Page Down | 34 |
| End | 35 |
| Home | 36 |
| Arrow Left | 37 |
| Arrow Up | 38 |
| Arrow Right | 39 |
| Arrow Down | 40 |
| Insert | 45 |
| Delete | 46 |
| 0 | 48 |
| 1 | 49 |
| 2 | 50 |
| 3 | 51 |
| 4 | 52 |
| 5 | 53 |
| 6 | 54 |
| 7 | 55 |
| 8 | 56 |
| 9 | 57 |
| ;: | 59 |
| =+ | 61 |
| 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 |
| Windows | 91 |
| Right Click | 93 |
| 0(Num Lock) | 96 |
| 1(Num Lock) | 97 |
| 2(Num Lock) | 98 |
| 3(Num Lock) | 99 |
| 4(Num Lock) | 100 |
| 5(Num Lock) | 101 |
| 6(Num Lock) | 102 |
| 7(Num Lock) | 103 |
| 8(Num Lock) | 104 |
| 9(Num Lock) | 105 |
| *(Num Lock) | 106 |
| +(Num Lock) | 107 |
| -(Num Lock) | 109 |
| .(Num Lock) | 110 |
| /(Num Lock) | 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 |
| Num Lock | 144 |
| Scroll Lock | 145 |
| My Computer | 182 |
| My Calculator | 183 |
| ,< | 188 |
| .> | 190 |
| /? | 191 |
| `~ | 192 |
| [{ | 219 |
| \| | 220 |
| ]} | 221 |
| ‘” | 222 |
Examples of jQuery keycode
Here are the following examples mention below
Example #1
jQuery keycode with onkeypress()
<!DOCTYPE html>
<html>
<body>
<p>Press any key on the keyboard in the text field to get the numeric character code</p>
<input type="text" size="30" onkeypress="sampleKeyCode(event)">
<p id="demoKey"></p>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
function sampleKeyCode(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
document.getElementById("demoKey").innerHTML = "The Numeric value is: " + keycode;
}
</script>
</body>
</html>Output:
On entering any key value, for, e.g. Entering ‘A’, the numerical value for ‘A’ is 65, as shown below.
On entering ‘b’, the numerical value for ‘b’ is 98. (onKeyPress) as shown below. If onKeyDown, the value of ‘b’ will be 66.
On entering the ‘Enter’ key, the value of the ‘Enter’ key is 13, as shown below
Example #2
jQuery keyCode with onKeydown().
<!DOCTYPE html>
<html>
<body>
<p>Press any key on the keyboard in the text field to get the numeric character code</p>
<h3>onKeydown() event</h3>
<input type="text" size="30" onkeydown="sampleKeyCode(event)">
<p id="demoKey"></p>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
function sampleKeyCode(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
document.getElementById("demoKey").innerHTML = "The Numeric value is: " + keycode;
}
</script>
</body>
</html>Output:
// The only difference between Example 1 and Example 2 here are the key events. In the previous example, we used onKeypress(), now we have used onKeydown(). //
On entering value ‘b’, the numeric keycode is 66, as shown below
Example #3
jQuery keyCode: key-value based on numeric value
<!DOCTYPE html>
<html>
<body>
<p>Press any key on the keyboard in the text field</p>
<h3>onKeydown() event</h3>
<input type="text" size="30" onkeydown="sampleKeyCode(event)">
<p id="demoKey"></p>
<script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script>
function sampleKeyCode(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
alert('You pressed a "enter" key in textbox');
}
else if(keycode == '45'){
alert('You pressed a "Insert" key in textbox');
}
else if(keycode == '9'){
alert('You pressed a "Tab" key in textbox');
}
else if(keycode == '48'){
alert('You pressed a "0" key in textbox');
}
else if(keycode == '90'){
alert('You pressed a "z" key in textbox');
}
else if(keycode == '112'){
alert('You pressed a "F1" key in textbox');
}
else if(keycode == '219'){
alert('You pressed a "[ or {" key in textbox');
}
else{
alert('You pressed some other key in textbox');
}
}
</script>
</body>
</html>Output:
On pressing the ‘Insert’ key,
On pressing the ‘z’ key,
On pressing ‘Enter’,
On pressing any other key,
As the keycode returns the Unicode character code of the key that is triggered here on the keypress event, we have two types of code types:
Character codes and Key Codes: Key codes represent the actual key of the keyboard, whereas Character code represents ASCII character.
Conclusion
With this, we conclude the topic ‘jQuery keycode’, we have seen what jQuery keycode and its syntax is and how it is used to get the keyCode of a particular keyboard value. Listed out the keyCodes for maximum keys of the keyboard. So that you can have this table or refer and try to give some hands-on this topic. Explained a few examples also can be useful to find out key codes or the Unicode character codes. We have 3 events here, onKeydown(), onKeyup(), or onKeypress(), examples above shown are using onKeypress() and onKeydown() events.
Recommended Articles
This is a guide to jQuery keycode. Here we discuss the Examples of jQuery keycode along with the codes and outputs and how it is used to get the keyCode of a particular keyboard value. You may also have a look at the following articles to learn more –
