JavaScript Keyboard Operations Needs and Solutions #5

Overview

This note contains two topics

• Introduce JavaScript keyboard events fundamentals
• Introduce commonly used keyboard operation needs and corresponding solutions on React stack.

Fundamentals

Keyboard events

Keyboard events and their triggering order

• Triggering order: keydown, keypress, keyup
• Details about these events
  • keydown: It fires when any key is pressed down. Practically most used, as the key down event has the maximum coverage of keys to produce the contextual information.
  • 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.

Frequently Used keyboard key (event.key)

export const KEYBOARD_KEYS = {
  arrowDown: 'ArrowDown',
  arrowUp: 'ArrowUp',
  escape: 'Escape',
  enter: 'Enter',
  tab: 'Tab',
  space: ' '
};

• Why do we use event.key as the way to detect which keyboard is clicked? Originally, there are four ways to identify which keyboard was clicked, the key, keyCode, the code, and 'which`.
  • It is because the last three are depretected , and the key property has the widest browser support.
  • The exception to usingcode is when you are detecting a direction( not fully tested)

References :

1. https://www.freecodecamp.org/news/javascript-keycode-list-keypress-event-key-codes/
2. https://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript