How to detect the key events in JavaScript

JavaScript provides keyboard events to handle keyboard actions performed by users.

Available events

The available events are:

• keydown event: This event is fired when a key is pressed. When you hold down the key without releasing, it fires repeatedly.
• keyup event: This event is fired when you release the key that was pressed.

Let’s add the event listener for keydown and keyup:

document.addEventListener('keydown', (event)=> {    
    console.log(event); // all event related info
    console.log(event.type);
    console.log(event.key);
    console.log(event.code);
});

document.addEventListener('keyup', (event)=> {
    console.log(event); // all event related info
    console.log(event.type);
    console.log(event.key);
    console.log(event.code);
});

After adding this listener, when we press any key on the keyboard, the info related to the event is printed on the console.

Detecting which key is pressed

The keydown/keypress events have two properties: event.code and event.key

• event.code: This represents a physical key on the keyboard. It also tells us which side of the key was pressed (leftMeta/rightMeta/ leftAlt…).

• event.key: This is the string representation of a key pressed by the user. Modifier keys, such as Shift, are also considered. For example, if j is pressed on the keyboard, then j will be returned, and if Shift + j is pressed, then J will be returned.

document.addEventListener('keydown', (event)=> {    
    console.log(event.key);
    console.log(event.code);
});

After adding the above listener, let’s say we pressed j on the keyboard. Then, event.code and event.key would have the following values:

• code - KeyJ
• key - j

If you press a number, let’s say 3, then:

• code - Digit3
• key - 3

Click here for reference for the value of event.code for all keys.

There are some keys for which both the key and code are the same. The backspace key, arrow keys, and enter key are all examples of this.

Detecting modifiers

To detect if the Ctrl (CMD in mac) key is pressed, we have to check the event.meta property.

Similarly:

• event.altKey is true if the Alt key is pressed
• event.metaKey is true if the Ctrl|CMD key is pressed
• event.shiftKey is true if the Shift key is pressed
• event.ctrlKey is true if the Control key is pressed

Detecting Ctrl + z

Check to see if the meta key is true and if the event code is KeyZ or the key pressed is z or Z.

document.addEventListener('keydown', 
(event)=> {    
  let isZKey = event.key === "z" || event.key ==="Z";
  let isMetaKey =  event.metaKey;
  if( isMetaKey && isZKey) {
    console.log("CTRL + Z pressed");
  }
});

Preventing the browser’s default action

We can use event.preventDefaut() to prevent some default browser action. For example, by pressing Ctrl+s, the browser will save the webpage be default. Instead, we can define our own operation.

document.addEventListener('keydown', 
(event)=> {    
  let isSKey = event.key === "s" || event.key ==="S";
  let isMetaKey =  event.metaKey;
  if( isMetaKey && isSKey) {
    event.preventDefault();
    console.log("Send request to save data");
  }
});

Using event.repeat

The keydown event is fired repeatedly when the key is pressed for a long time without releasing. We can detect if the event is fired repeatedly using event.repeat.

document.addEventListener('keydown', 
(event)=> {    
    console.log(event.repeat); // true when event is repeatedly fired
});

Printing the information of an event

Let’s look at a program to print the info of a keydown event.

document.addEventListener('keydown', 
(event)=> {    
    console.log("Key = ", event.key);
    console.log("Code = ", event.code);
    console.log("Is Alt Key= ", event.altKey);
    console.log("Is Ctlr Key= ", event.ctrlKey);
    console.log("Is Meta Key= ", event.metaKey);
    console.log("Is Shift Key= ", event.shiftKey);
});

Deprecated event & properties

• The keypress event will be fired when we press a key. The problem is, the keypress event doesn’t fire for some keys like the arrow keys, meta key, etc.

• event.keyCode , event.which, and event.charCode are deprecated properties because some browsers are incompatible with these properties.

Though the above event and properties are deprecated, the old code still works. Still, it is not recommended to use deprecated properties.