JavaScript Keyboard Event | JavaScript Keyboard Key Code

How to get JavaScript Keyboard Event value. Here is the quick solution to get a keyboard event in JavaScript. The event occurs when you press a key on the keyboard.

In this post, you can test yourself on which key you were pressed. When you get this event contains all the event information that you might need to write your own code.

Sometimes you need to prevent some keyboard key operations like prevent to select all text, copy, paste, etc. At that time you need to write a JavaScript keyboard event function to handle it as per your need.

JavaScript Keyboard Key Event

The following JavaScript code, when a keypress event fires, you will get all event properties. For example, when you pressing “1”, you will get “49” value. It is recommended to write logic on an event.which instead of event.keyCode and event.charCode.

document.addEventListener("keydown", function(event) {
    console.log(event.which);
    console.log(event.altKey);
    console.log(event.ctrlKey);
    console.log(event.shiftKey);
    console.log(event.metaKey);
});

The event.which property is recommended the property to track keyboard key input. Moreover, avoid using the event.keyCode and event.charCode properties.

JavaScript KeyboardEvent Test

Click on the below box and press any keyboard key to get keyboard event information.

JavaScript KeyboardEvent Properties

The following table contains the KeyboardEvent properties and their description.

Properties Description
altKey A Boolean value returns when a key event was triggered whether the ALT key was pressed. Example: event.altKey
charCode Return the Unicode character code of the key when the event was triggered. Example: event.charCode
code Return the code of the key when the event was triggered. Example: event.code
ctrlKey Boolean value returns when a key event was triggered. Example: event.ctrlKey
key Return the identifier of the key when the event was triggered. Example: event.key
keyCode Return the Unicode key code of the key when the event was triggered. Example: event.keyCode
metaKey A Boolean value returns whether the META key (Command/Cmd/⌘ key) was pressed when the key event occurred. Example: event.metaKey
shiftKey A Boolean value returns when a key event was triggered whether the SHIFT key was pressed. Example: event.shiftKey
which Return the Unicode character code of the key when onkeypress event was triggered. Example: event.which

JavaScript Keycode values

The following table contains values that are getting from event.which property.

Key Code
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
space 32
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 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
a 65
b 66
c 67
Key Code
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
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
Key Code
numpad 7 103
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 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
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222

Final Thoughts

That all you need to know how to get a JavaScript keyboard event. Moreover, we see event.which property is used to write custom logic when the key event triggered. Furthermore, we used the JavaScript keyboard tester tool. Finally, we see JavaScript keycode values that are obtained from the event.which property.

We hope you have found this article helpful. Let us know your questions or feedback if any through the comment section in below. You can subscribe our newsletter and get notified when we publish new WordPress articles for free. Moreover, you can explore here other JavaScript related articles.

If you like our article, please consider buying a coffee for us.
Thanks for your support!

Support us on Buy me a coffee! Buy me a coffee!



Join the Discussion.