Search 7,000+ tutorials Forum Donate

Learn to code — free 3,000-hour curriculum

JANUARY 8, 2021 / #JAVASCRIPT

JavaScript Keycode List – Keypress Event Key

Codes for Enter, Space, Backspace, and More
TAPAS ADHIKARY

JavaScript keyboard events help you capture user

interactions with the keyboard.

Like many other JavaScript events, the KeyboardEvent interface provides all
the required properties and methods for handling every keystroke a user
makes using the keyboard.

There have been many articles written about how they work and how to use
them. At the same time, W3.org keeps updating the specification by
introducing new properties, deprecating existing ones, and marking certain
code as legacy.

Because of this, it is essential for web developers to keep learning about the K
eyboardEvent interface to know what exactly they should use and what's no
longer relevant.

In this article, we will learn about:

The KeyboardEvent interface.

The keyboard event types we need to focus on.

The keyboard event types we may not ever need.

Which properties you need in practice and how different browsers

handle them.

What is deprecated, and what's in use.

A playground to try things out as we learn.

Finally, the current list of key codes for reference and future use.

Hope you enjoy it.

The KeyboardEvent interface and

the event types
The KeyboardEvent interface provides information using the defined
constants, properties, and a single method (as of January 2021). It extends
the UIEvent interface which eventually extends the Event interface.

KeyboardEvent Hierarchy

There are primarily three keyboard event types, keydown , keypress and, key
up . We can get contextual information about these events from the Keyboard
Event interface's properties and methods.

You can add each of these event types to an HTML element or document
object using the addEventListener method. Here is an example of listening
to a keydown event on an element whose id is, 'type-here':

let elem = document.getElementById('type-here');

elem.addEventListener("keydown", function (event) {

// The parameter event is of the type KeyboardEvent
addRow(event);
});

Alternatively, you can use the handler methods like, onKeydown(event) , onKe
yup(event) , onKeypress(event) with the element to handle keyboard
events. Here is an example of handling a keyup event on an input element:

<input type="text" id="type-here" onkeyup="doSomething(event)">

If you print the event object in the browser's console, you will see all its
properties and methods along with the ones it inherits from the UIEvent and
Event interfaces.

I have pressed the key, a while handling the keyup event

Try This Interactive Keyboard

Event Playground
Before we go any further, how about a playground to explore all the keyboard
events, their properties, characteristics, and so on? I think it will be awesome
to use it alongside this article and beyond.

⌨
Just focus your cursor anywhere in the app embedded below, and type any
key to see the contextual information about it.

You can also filter out the events you want by unchecking the checkboxes at
the top. So give it a try: ⌨

👋
index.html https://js-keycodes.stackblitz.io
1 <title>JavaScript Keyboard Events</title>
<title>JavaScrip
t Keyboard
JavaScript Keyboard Events
2
Events</title>

3<div

This demo works only with the Physical Keyboard

class="git-ribbo
n">
4 <a
Filter by: href="https://
Keydown Keypress Keyup
github.com/ata
Hint: The above filtering reflects from the next key type.
pas/js-keycode
Clear All s-demo"
5 target="_bla
nk"><img
loading="laz
Focus Anywhere and Press Any Key
y"
width="149"
Console height="149"

js-keycodes Editor Preview Both Edit on StackBlitz

The Keyboard Events Playground

If you have any issues in accessing the playground above, you can
access this tool directly here: https://keyevents.netlify.app/

And you can find the source code of the demo from here:
https://github.com/atapas/js-keyevents-demo

keydown, keypress, keyup - which

one should you use?
The keyboard events are:

keydown : It fires when any key is pressed down.

keypress : It fires only when a key that produces a character value is

pressed down. For example, if you press the key a , this event will fire
as the key a produces a character value of 97 . On the other hand, this
event will not fire when you press the shift key as it doesn't produce
a character value.

keyup : It fires when any key is released.

If all three events are attached to a DOM element, the firing order would be:

1. First, keydown

2. Next, keypress (with the condition stated above)

3. Last, keyup

Among these events, the most used Keyboard event is (or, should be) keydow
n because:

The keydown event has the maximum coverage of keys to produce the
contextual information. The keypress event works only for a subset
of the keys. You can't capture the Alt, Ctrl, Shift, Meta, and other
similar key events with a keypress. This also means that we can not fire
the keypress event with key combinations like Ctrl Z , Shift Tab ,
and so on.

Moreover, the keypress event has been deprecated. This is a big

enough reason to avoid it.

While both keydown and keyup events cover all the keys and are well
supported by most browsers, there are a few differences that push
keydown ahead of keyup . The keydown event fires before the browser
processes the key, whereas the keyup event fires after the browser
processes the key. If you cancel a keydown event (say, using
event.preventDefault() ), the browser's action will be canceled too.
In case of the keyup event, the browser's action will not be canceled
even when you have canceled the event.

In the example below, we are using event.preventDefault() when a keydow

n or keyup event fires. The bowser's action to write the key characters into
the textbox will not be performed in the case of keydown but it will continue
to happen for keyup .

index.html https://js-key-down…
1 <h2>See the Console too...</h2>
2 <div id="app" class="app">
3 <div class="down"> See the Console too...
4 <label for="first"> Key Down Test
</label>
5 <input type="text" id="first" Key Down Test Key Up Test
name="first" placeholder="type here" /> type here type here
6 </div>
7
8 <div class="up">
9 <label for="second"> Key Up Test
</label>
10 <input type="text" id="second" Console
name="second" placeholder="type here" />
11 </div> Clear console on reload
12 </div>
13

js-key-down-up-test Editor Preview Both Edit on StackBlitz

keydown vs keyup

With all that explanation, the keydown event is a clear winner and should
become the most popular (used) key event type.

How to use the KeyboardEvent

properties in practice
This is the billion dollar question! The shortest answer is, it depends. But on
what? It depends on:

The browser support for your application

How legacy is your application code is and how much are you willing to
refactor?

But before we get there, let's see a preview of some of the the useful
properties and methods of the KeyboardEvent interface.

PROPRTY/METHOD DESCRIPTION

altKey Returns a boolean(true/false). The value is true when Alt key is pressed.

ctrlKey Returns a boolean(true/false). The value is true when Control key is pressed.

shiftKey Returns a boolean(true/false). The value is true when Shift key is pressed.

metaKey Returns a boolean(true/false). The value is true when any of the Meta

code Code value of the Physical Key.

key The actual value of the key pressed.

getModifierState() method Returns a boolean(true/false). The value true indicates the on state of these keys,

charCode Returns the Unicode value. This has been deprecated and we should use the

keyCode Returns the neumeric code of the pressed value. This has been deprecated and we should use the

which Returns the neumeric code of the pressed value. This has been deprecated and we should use the

The last three properties are deprecated and you should use the key
property instead. The key property has the widest browser support.

It is supported on:

Microsoft Edge: Version >= 79

Firefox: Version >= 29

Google Chrome: Version >= 51

Safari: Version >= 10.1

So as long as you are not using any of the older browsers, the event.key
property should be enough for you to identify a key. In case you have to
support an older browser, a better fallback would be the event.which
property.

window.addEventListener("keydown", function (event) {

if (event.key !== undefined) {

// Handle the event with KeyboardEvent.key
} else if (event.which !== undefined) {
// Handle the event with KeyboardEvent.which
}
});

If your code uses any of the deprecated properties and you have an
opportunity to refactor that code, it is always better to go for it.

Modifier Keys
The modifier keys are the special keys on your keyboard that modify the
default behavior of the other keys. Control , Shift , and Alt are some
modifier keys. When a modifier key is combined with another key, you can
expect a different action to occur.

For example, if you press the key z , it is supposed to return the key and code
for the letter z. If you combine it with the modifier Control and press Contro
l z , you will likely get an Undo operation. Let's see it with some more
examples in the next section.

The properties, event.altKey , event.ctrlKey , event.shiftKey , and so on

help detect if a modifier key has been pressed.

Key Combinations
We can combine multiple keys and perform actions based on the key
combinations. The code snippet below shows how to combine the Control
and z key to define an action:

document
.getElementById("to_focus")
.addEventListener("keydown", function(event) {
if (event.ctrlKey && event.key === "z") {
// Do Something, may be an 'Undo' operation
}
});

Here is another example that demos a few more key combinations. Please
give it a try:

index.js https://js-key-combinations.stackblitz.io
1 // Import stylesheets
stylesheets
2 import
"./style.css"; Try Key Combinations
3
4 // Write
Focus Here and try the Key Combinations,
Javascript code!
5 document - Control z
- Shift Tab
6 .getElementByI - Control a
d("to_focus") - Alt Shift Tab
7 .addEventListe
ner
("keydown",
function
(event) {
8 if
(event.ctrlK
Console ey &&

js-key-combinations Editor Preview Both Edit on StackBlitz

Try Key Combinations

A Full List of Key Event Values

The table below shows a list of keys with the event.which , event.key and e
vent.code values.

KEY NAME EVENT.WHICH EVENT.KEY EVENT.CODE NOTES

backspace 8 Backspace Backspace

tab 9 Tab Tab

enter 13 Enter Enter

shift(left) 16 Shift ShiftLeft event.shiftKey

shift(right) 16 Shift ShiftRight event.shiftKey

ctrl(left) 17 Control ControlLeft event.ctrlKey

ctrl(right) 17 Control ControlRight event.ctrlKey

alt(left) 18 Alt AltLeft event.altKey

alt(right) 18 Alt AltRight event.altKey

pause/break 19 Pause Pause

caps lock 20 CapsLock CapsLock

escape 27 Escape Escape

space 32 Space The event.key

page up 33 PageUp PageUp

page down 34 PageDown PageDown

end 35 End End

home 36 Home Home

left arrow 37 ArrowLeft ArrowLeft

up arrow 38 ArrowUp ArrowUp

right arrow 39 ArrowRight ArrowRight

down arrow 40 ArrowDown ArrowDown

print screen 44 PrintScreen PrintScreen

insert 45 Insert Insert

delete 46 Delete Delete

0 48 0 Digit0

1 49 1 Digit1

2 50 2 Digit2

3 51 3 Digit3

4 52 4 Digit4

5 53 5 Digit5

6 54 6 Digit6

7 55 7 Digit7

8 56 8 Digit8

9 57 9 Digit9

a 65 a KeyA

b 66 b KeyB

c 67 c KeyC

d 68 d KeyD

e 69 e KeyE

f 70 f KeyF

g 71 g KeyG

h 72 h KeyH

i 73 i KeyI

j 74 j KeyJ
 k 75 k KeyK

l 76 l KeyL

m 77 m KeyM

n 78 n KeyN

o 79 o KeyO

p 80 p KeyP

q 81 q KeyQ

r 82 r KeyR

s 83 s KeyS

t 84 t KeyT

u 85 u KeyU

v 86 v KeyV

w 87 w KeyW

x 88 x KeyX

y 89 y KeyY

z 90 z KeyZ

left window key 91 Meta MetaLeft event.metaKey

right window key 92 Meta MetaRight event.metaKey

select key (Context Menu) 93 ContextMenu ContextMenu

numpad 0 96 0 Numpad0

numpad 1 97 1 Numpad1

numpad 2 98 2 Numpad2

numpad 3 99 3 Numpad3

numpad 4 100 4 Numpad4

numpad 5 101 5 Numpad5

numpad 6 102 6 Numpad6

numpad 7 103 7 Numpad7

numpad 8 104 8 Numpad8

numpad 9 105 9 Numpad9

multiply 106 * NumpadMultiply

add 107 + NumpadAdd

subtract 109 - NumpadSubtract

decimal point 110 . NumpadDecimal

divide 111 / NumpadDivide

f1 112 F1 F1

f2 113 F2 F2

f3 114 F3 F3

f4 115 F4 F4

f5 116 F5 F5

f6 117 F6 F6

f7 118 F7 F7

f8 119 F8 F8

f9 120 F9 F9

f10 121 F10 F10

f11 122 F11 F11

f12 123 F12 F12

num lock 144 NumLock NumLock

scroll lock 145 ScrollLock ScrollLock

audio volume mute 173 AudioVolumeMute The event.which

audio volume down 174 AudioVolumeDown The event.which

audio volume up 175 AudioVolumeUp The event.which

media player 181 LaunchMediaPlayer The event.which

launch application 1 182 LaunchApplication1 The event.which

launch application 2 183 LaunchApplication2 The event.which

semi-colon 186 ; Semicolon The event.which

equal sign 187 = Equal The event.which

comma 188 , Comma

dash 189 - Minus The event.which

period 190 . Period

forward slash 191 / Slash

Backquote/Grave accent 192 ` Backquote

open bracket 219 [ BracketLeft

back slash 220 \ Backslash

close bracket 221 ] BracketRight

single quote 222 ' Quote

Please Note:

event.which has been deprecated(or outdated)

The event.code value is the 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 other browsers

for the keys, equal(=) , semicolon(;) , and dash/minus(-)

How about the Virtual Keyboard?

So what about virtual keyboards, like using our mobile phones or tablets or
any other input devices?

The specification says that if the virtual keyboard has a similar key layout and
functionality to a standard keyboard, then it must result in an appropriate
code attribute. Otherwise, it is not going to return the right value.

In Summary
To Summarize:

You can use the KeyboardEvent to capture user interactions using a

Keyboard.

There are primarily three key events, keydown , keypress , and keyup .

We should use the keydown event type as much as possible as it

satisfies most of the use-cases.

The keypress event type has been deprecated.

The event.which property has been deprecated. Use event.key

wherever possible.

If you have to support an older browser, use appropriate fallback for

key detection.

We can combine multiple keys and perform operations.

The virtual keyboard supports these events as long as the layout and
functions are similar to the standard keyboard.

That's all for now. Thank you for reading this far! Let's connect. You can @ me
on Twitter (@tapasadhikary) with comments or feel free to follow.

From https://giphy.com/

TAPAS ADHIKARY
Read more posts by this author.

If you read this far, tweet to the author to show them you care.
Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped
more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) nonprofit Trending Guides

organization (United States Federal Tax Identification Number: 82-

10 to the Power of 0 Recursion Inductive VS Deductive
0779546)
Git Reset to Remote ISO File JavaScript Empty Array
Our mission: to help people learn to code for free. We accomplish this
R Value in Statistics ADB Best Instagram Post Time
by creating thousands of videos, articles, and interactive coding
What is Economics? MBR VS GPT Garbage Collection in Java
lessons - all freely available to the public. We also have thousands of
Module Exports Debounce Auto-Numbering in Excel
freeCodeCamp study groups around the world.
Python VS JavaScript Helm Chart JavaScript Keycode List
Donations to freeCodeCamp go toward our education initiatives and
Model View Controller 80-20 Rule JavaScript Reverse Array
help pay for servers, services, and staff.
React Testing Library OSI Model How to Screenshot on Mac

ASCII Table Chart HTML Link Code How to Reverse Image Search
You can make a tax-deductible donation here.
Data Validation SDLC Ternary Operator JavaScript

About Alumni Network Open Source Shop Support Sponsors Academic Honesty Code of Conduct Privacy Policy Terms of Service Copyright Policy