JQuery Keycode | KeyCodes Table And Examples Of JQuery Keycode

Trang chủ » Bảng Keycode » JQuery Keycode | KeyCodes Table And Examples Of JQuery Keycode

Có thể bạn quan tâm

Updated April 5, 2023

jQuery keycode

 

 

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.

Watch our Demo Courses and Videos

Valuation, Hadoop, Excel, Mobile Apps, Web Development & many more.

Syntax:

jQuery.ui.keyCode

There 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:

jQuery keycode output 1

On entering any key value, for, e.g. Entering ‘A’, the numerical value for ‘A’ is 65, as shown below.

jQuery keycode output 2

On entering ‘b’, the numerical value for ‘b’ is 98. (onKeyPress) as shown below. If onKeyDown, the value of ‘b’ will be 66.

jQuery keycode output 3

On entering the ‘Enter’ key, the value of the ‘Enter’ key is 13, as shown below

jQuery keycode output 4

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(). //

jQuery keycode output 5

On entering value ‘b’, the numeric keycode is 66, as shown below

output 6

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,

output 7

On pressing the ‘z’ key,

output 8

On pressing ‘Enter’,

output 9

On pressing any other key,

output 10

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 –

  1. jQuery width
  2. jQuery promise
  3. jQuery first child
  4. JQuery attr()

Từ khóa » Bảng Keycode