Keyboard Event

Before we get to keyboard, please note that on modern devices there are other ways to “input something”. For instance, people use speech recognition (especially on mobile devices) or copy/paste with the mouse. So if we want to track any input into an <input> field, then keyboard events are not enough. There’s another event named input to handle changes of an <input> field, by any means. And it may be a better choice for such task. We’ll cover it later in the chapter Events: change, input, cut, copy, paste.

Keyboard events should be used when we want to handle keyboard actions (virtual keyboard also counts).

keydown and keyup

The keydown events happens when a key is pressed down, and then keyup – when it’s released.

event.key and event.code

The key property of the event object allows to get the character, while the code property of the event object allows to get the “physical key code”.

For instance, the same key Z can be pressed with or without Shift. That gives us two different characters: lowercase z and uppercase Z. The event.key is exactly the character, and it will be different. But event.code is the same:

If you press z, the value of event.key will be z and the value of event.code will be KeyZ

If you press SHIFT + z, the value of event.key will be Z and the value of event.code will be KeyZ

Here is a demo. Type any key and see the console -

<input id="demo1"></input>
<script type="text/javascript">
demo1.onkeydown=function(event){
	console.log("Key = "+event.key + ", Code = "+event.code);
}
</script>

Every key has the code that depends on its location on the keyboard. For instance: -

• Letter keys have codes "Key<letter>": "KeyA", "KeyB" etc.
• Digit keys have codes: "Digit<number>": "Digit0", "Digit1" etc.
• Special keys are coded by their names: "Enter", "Backspace", "Tab" etc.

What if a key does not give any character? For instance, Shift or F1 or others. For those keys event.key is approximately the same as event.code

Key	event.key	event.code
F1	F1	F1
Backspace	Backspace	Backspace
Shift	Shift	ShiftLeft or ShiftRight

Auto-Repeat

If a key is being pressed for a long enough time, it starts to repeat: the keydown triggers again and again, and then when it’s released we finally get keyup. So it’s kind of normal to have many keydown and a single keyup. For all repeating keys the event object has event.repeat property set to true.

Here is an example -

So when you press the key the repeat property of the first occurance of the event is false. But afterwards occurance of the keydown event contains repeat = true.

Default Action

Default actions vary, as there are many possible things that may be initiated by the keyboard. For instance:

• A character appears on the screen (the most obvious outcome).
• A character is deleted (Delete key).
• The page is scrolled (PageDown key).
• The browser opens the “Save Page” dialog (Ctrl+S)
• ... and so on.

Preventing the default action on keydown can cancel most of them, with the exception of OS-based special keys. For instance, on Windows Alt+F4 closes the current browser window. And there’s no way to stop it by preventing the default action in JavaScript.

For instance, the <input> below expects a phone number, so it does not accept keys except digits, +, () or -:

<script>
function checkPhoneKey(key) {
  return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-';
}
</script>
<input onkeydown="return checkPhoneKey(event.key)" placeholder="Phone, please" type="tel">

Legacy

In the past, there was a keypress event, and also keyCode, charCode, which properties of the event object.

Please do not use that event as this event is deprecated in most of the browser. So it is no more in use.