Projects

Keyboard Events Playground

Tapas Adhikary

Tapas Adhikary

January 05, 2021

7 min read


stars0
forks0
watchers 0
MIT

Introduction

JavaScript keyboard events help you capture user interactions with the keyboard. Here is a playground for you to get started with. Try the demo link above to see how it works. Don't forget to check out the code in Github and give it a star.

Do you want to learn more?

Check this out,

JavaScript Keycode List – Keypress Event Key Codes for Enter, Space, Backspace, and More

🖮 How about a Key Code List?

Here is the list of all the key codes:

  • event.which is leacy(or outdated)
  • The event.code value is same for small letters(a) and capital letters(A). Hoever the event.key value represents the actual letter.
  • The event.which value is different in Firefox(FF) and any other browsers for the keys, equal(=), semicolon(;), and dash/minus(-)
Key Nameevent.whichevent.keyevent.codeNotes
backspace8BackspaceBackspace
tab9TabTab
enter13EnterEnter
shift(left)16ShiftShiftLeftevent.shiftKey is true
shift(right)16ShiftShiftRightevent.shiftKey is true
ctrl(left)17ControlControlLeftevent.ctrlKey is true
ctrl(right)17ControlControlRightevent.ctrlKey is true
alt(left)18AltAltLeftevent.altKey is true
alt(right)18AltAltRightevent.altKey is true
pause/break19PausePause
caps lock20CapsLockCapsLock
escape27EscapeEscape
space32SpaceThe event.key value is a single space.
page up33PageUpPageUp
page down34PageDownPageDown
end35EndEnd
home36HomeHome
left arrow37ArrowLeftArrowLeft
up arrow38ArrowUpArrowUp
right arrow39ArrowRightArrowRight
down arrow40ArrowDownArrowDown
print screen44PrintScreenPrintScreen
insert45InsertInsert
delete46DeleteDelete
0480Digit0
1491Digit1
2502Digit2
3513Digit3
4524Digit4
5535Digit5
6546Digit6
7557Digit7
8568Digit8
9579Digit9
a65aKeyA
b66bKeyB
c67cKeyC
d68dKeyD
e69eKeyE
f70fKeyF
g71gKeyG
h72hKeyH
i73iKeyI
j74jKeyJ
k75kKeyK
l76lKeyL
m77mKeyM
n78nKeyN
o79oKeyO
p80pKeyP
q81qKeyQ
r82rKeyR
s83sKeyS
t84tKeyT
u85uKeyU
v86vKeyV
w87wKeyW
x88xKeyX
y89yKeyY
z90zKeyZ
left window key91MetaMetaLeftevent.metaKey is true
right window key92MetaMetaRightevent.metaKey is true
select key (Context Menu)93ContextMenuContextMenu
numpad 0960Numpad0
numpad 1971Numpad1
numpad 2982Numpad2
numpad 3993Numpad3
numpad 41004Numpad4
numpad 51015Numpad5
numpad 61026Numpad6
numpad 71037Numpad7
numpad 81048Numpad8
numpad 91059Numpad9
multiply106*NumpadMultiply
add107+NumpadAdd
subtract109-NumpadSubtract
decimal point110.NumpadDecimal
divide111/NumpadDivide
f1112F1F1
f2113F2F2
f3114F3F3
f4115F4F4
f5116F5F5
f6117F6F6
f7118F7F7
f8119F8F8
f9120F9F9
f10121F10F10
f11122F11F11
f12123F12F12
num lock144NumLockNumLock
scroll lock145ScrollLockScrollLock
audio volume mute173AudioVolumeMute⚠️ The event.which value is 181 in Firefox. Also FF provides the code value as, VolumeMute
audio volume down174AudioVolumeDown⚠️ The event.which value is 182 in Firefox. Also FF provides the code value as, VolumeDown
audio volume up175AudioVolumeUp⚠️ The event.which value is 183 in Firefox. Also FF provides the code value as, VolumeUp
media player181LaunchMediaPlayer⚠️ The ️event.which value is 0(no value) in Firefox. Also FF provides the code value as, MediaSelect
launch application 1182LaunchApplication1⚠️ The ️event.which value is 0(no value) in Firefox. Also FF provides the code value as, LaunchApp1
launch application 2183LaunchApplication2⚠️ The ️event.which value is 0(no value) in Firefox. Also FF provides the code value as, LaunchApp2
semi-colon186;Semicolon⚠️ The event.which value is 59 in Firefox
equal sign187=Equal⚠️ The event.which value is 61 in Firefox
comma188,Comma
dash189-Minus⚠️ The event.which value is 173 in Firefox
period190.Period
forward slash191/Slash
Backquote/Grave accent192`Backquote
open bracket219[BracketLeft
back slash220\ Backslash
close bracket221]BracketRight
single quote222'Quote