Adding keyboard input events in JavaScript
Last updated: September 27, 2022.
In some circumstances, you may want to add keyboard input events to your web page or app, such as when numeric input is required to make a calculation or for gaming.
Though it is a fairly straightforward process, there are several deprecated methods that can make the implementation of keyboard input problematic.
In this tutorial, we show you the right ways to add keyboard events to your web page or app in 2022.
Keyboard event types
To incorporate keyboard events, listen out for one of the following on the document
object:
keydown
: fires when a key is pressed, provides code of key pressedkeypress
: fire when a key is pressed, provide code of which character is intendedkeyup
: fired when a pressed down key is released
Example: If shift + a
is pressed for in a keydown
event, the printed value of .key
will be Shift
and A
. For a keypress event, is will only print A
.
Each time a key is pressed, an event object is generated. You can check out these objects with the following code:
document.addEventListener('keydown', (event) => { console.log(event); });
If you run this code and open the console log in your browser, the output will look something like this after some keys are pressed:

These objects provide us with the necessary information to handle each key press. For example, you can see that the key
and code
property indicate the key pressed.
Now, we need to respond to this input.
Handling keyboard events
In each object generated by a key press, there are two properties you may want to use:
event.key
: the logical value of the key pressedevent.code
: based upon the physical position of the keys
We can see the values generated by pressing keys with the following code:
document.addEventListener('keydown', (event) => { console.log("event.key = " + event.key + " " + "event.code = " + event.code); });
This generates output like the following:

Notice that event.key
and event.code
generally match, but not always. The final two outputs were generated by pressing #
and +
. But event.code
registered the values for these events as Backslash
and BracketRight
.
This is because the value of event.code
is generated based on the physical placement of a key. Thus, it can often produce unintuitive results across different keyboard layouts.
For more predictable results, event.key
is recommended.
event.which
and event.keyCode
properties have been deprecated. Their use is therefore not guaranteed to be supported by modern browsers.
From keyboard event to output
A simple way to handle the output is to append the event.key
value to the DOM:
document.addEventListener('keydown', (event) => { document.body.append(event.key); });
But is most situations, this is too simplistic. We instead need to specify what should have in response to a key press with a specific value, rather than using the value directly.
For example, when creating a JavaScript calculator, it would be undesirable for letters to be displayed.
Therefore, in most situations, it is a good idea to handle valid key presses inside an if...else
statement:
document.addEventListener('keydown', (event) => { if (event.key == "0") {document.body.append("0")} else if (event.key == "1") {document.body.append("1")} else if (event.key == "2") {document.body.append("2")} else if (event.key == "3") {document.body.append("3")} else if (event.key == "4") {document.body.append("4")} else if (event.key == "5") {document.body.append("5")} else if (event.key == "6") {document.body.append("6")} else if(event.key == "7") {document.body.append("7")} else if(event.key == "8") {document.body.append("8")} else if(event.key == "9") {document.body.append("9")} else if(event.key == "+") {document.body.append("+")} else if(event.key == "-") {document.body.append("-")} else if(event.key == "*") {document.body.append("*")} else if(event.key == "/") {document.body.append("/")} });
By handling each valid keyboard input in this way, non-valid keyboard input is ignored by default. So, in the above example, only the numbers 0-9
and +
, -
, *
and /
are appended to the DOM. Letters, for example, are not handled.
Summary
Adding keyboard events to your web page or app can greatly improve user experience, such as when input is required for a numeric calculation or for gaming.