Updated April 20, 2023
Introduction to JavaScript keycodes
In JavaScript the keycodes property plays a pivotal role which returns the unicode character present as key value within that key code which gets triggered as soon as the event of onkeypress is made either with onkeyup or onkeydown button which in turn have a massive difference between themselves with the fact that both the key trigger event including two code types namely character codes and key codes. Where a character code as part of key code will include a number representing an ASCII character and key codes represent the actual set of keys present in the keyboard responsible for all the key related events.
How keycodes works in JavaScript?
The keycode property is one of the properties in JavaScript which returns code in Unicast character format and then that key gets triggered in the onkeypress event with the help of onkeydown button and onkeyup button for the entire event.
To elaborate the process properly following is the working flow for keycodes in JavaScript which are as follows:
- There are mainly two types of keycodes namely character codes and keycodes.
- Character codes as part of JavaScript keycodes is mainly used to represent number in an ASCII format for characters.
- On the other hand, keycodes as part of JavaScript is mainly used to represent number in with an actual key on the keyboard.
- But the exception arises with a fact that these two types of Character code and keycodes are not responsible for following the process of representation in a similar format. Consider an example where the character has value with lower case and the equivalent character value is also same which signifies a fact that in both the condition key pressed will be same therefore the keycode needs to find a difference which can include the fact with a difference in the ASCII character and the keycode related to the Unicast character.
- The keycode property does not work seamlessly with the onkeypress event while using a web browser for Firefox. To support for a cross-browser solution which property together with keycode needs to check.
- In case there is a need to convert the final Unicode character then, its pretty much a need to use the fromCharCode() method.
- The keycode property is a read only method property which do not support for any write property to intervene the entire process.
- To make the web browser support compatible this keycode and which property is used in unison to resolve the compatibility and version issues.
- In case it is pretty much needed to know which kind of key press is responsible for event occurred with ALT then altkey is used, CTRL is used with ctrlkey, META is used with metakey and shift is used with shiftkey property.
- Any number representing a Unicode character code or Unicode key code is used as a return type.
- The syntax flow is in a way which very uniquely represents the keycode with event which is event.keycode.
- All the browsers present are almost compatible with the JavaScript keycodes with certain exception where the browser support is bit less or if there exist some incompatibility issues.
- There are other keyboard events which are almost like JavaScript keycodes with very little differences namely KeyboardEvent key property, Keyboard event with char property and keyboardEvent which property.
- These three properties are in some point or the other dependent on each other and follows the semantics for making the JavaScript keycodes work uniformly and independently.
- These events while performed needs to keep a check with the keypress, execution and returned value for matching the semanticity of the working flow.
List of keycodes in JavaScript
Given below is the list of keycodes in JavaScript:
- alt 18
- tab 9
- shift 16
- enter 13
- ctrl 17
- home 36
- page down 34
- end 35
- escape 27
- page up 33
- caps lock 20
- pause/break 19
- backspace 8
- delete 46
- right arrow 39
- down arrow 40
- left arrow 37
- up arrow 38
- insert 45
- 0 48
- 1 49
- 2 50
- 3 51
- 4 52
- 5 53
- 6 54
- 7 55
- 8 56
- 9 57
- 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
- select key 93
- left window key 91
- right window key 92
- numpad 0 96
- numpad 1 97
- numpad 2 98
- numpad 3 99
- numpad 4 100
- numpad 5 101
- numpad 6 102
- numpad 7 103
- numpad 8 104
- numpad 9 105
- multiply 106
- divide 111
- decimal point 110
- add 107
- subtract 109
- f1 112
- f2 113
- f3 114
- f4 115
- f5 116
- f6 117
- f7 118
- f8 119
- f9 120
- f10 121
- f11 122
- f12 123
- single quote 222
- close bracket 221
- open bracket 219
- back slash 220
- equal sign 187
- comma 188
- dash 189
- period 190
- forward slash 191
- grave accent 192
- num lock 144
- scroll lock 145
- semi-colon 186
Examples of JavaScript keycodes
Given below are the examples of JavaScript keycodes:
Example #1
This program demonstrates the JavaScript keycodes in Unicode character code format supporting cross dimensional web browser.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Press any key in the keyboard to represent any Unicode character code.</p>
<input type="text" size="80" onkeypress="Func_h(event)">
<p id="demo_6"></p>
<script>
function Func_h(event)
{
var t_st = event.which || event.keyCode;
document.getElementById("demo_6").innerHTML = "Unicode_Value " + t_st;
}
</script>
</body>
</html>Output:
Example #2
This program demonstrates a message error which arise when the user accidently clicks on the escape button in the keyboard.
Code:
<!DOCTYPE html>
<html>
<body>
<p>Scenario described when user clicks on escape key</p>
<input type="text" size="80" onkeydown="keyCode(event)">
<script>
function keyCode(event) {
var x = event.keyCode;
if (x == 27) {
alert ("Someone_clicked_accidentally_escape_Button");
}
}
</script>
</body>
</html>Output:
Advantages of JavaScript keycodes
There are advantages associated with JavaScript keycodes which are as follows:
- JavaScript keycode gives programmers the flexibility to get reflected with the errors easily if in case any unwanted keycode gets pressed accidentally.
- It provides users ability to get JavaScript keycode represent in Unicode format for better representation and understanding.
Conclusion
keycodes in JavaScript plays a very significant role in a way it provides programmers and users the flexibility to play around with keyboard and its associated keycodes related events. These keycodes are part of many keyboard related event which help users give a view and enhancement to improvise the working scope and requirement.
Recommended Articles
This is a guide to JavaScript keycodes. Here we discuss the introduction, working, list of keycodes in JavaScript and examples respectively. You may also have a look at the following articles to learn more –
