keyboard-key

A simple utility for determining the KeyboardEvent.key property from a keyboard event.

• Install
• Usage
  • getKey()
  • getCode()
• Why?
• Locale Caveat

Install

yarn add keyboard-key

# or

npm install keyboard-key

Usage

getKey()

Get the key property value from an event.

document.addEventListener('keydown', event => {
  const key = keyboardKey.getKey(event)

  switch (key) {
    case 'Escape':
      // handle escape key
      break
    default:
      break
  }
})

See MDN or the source for a full list of key values.

getCode()

You can also get the normalized keyCode from an event. keyboard-key includes a hash of key names to keyCodes for easy comparisons:

document.addEventListener('keydown', event => {
  const code = keyboardKey.getCode(event)

  switch (code) {
    case keyboardKey.Escape: // 27
      // handle escape key
      break
    default:
      break
  }
})

Why?

Most previous key identifying KeyboardEvent properties have been pressed have been deprecated in favor of Keyboard.key.

👎 KeyboardEvent.char
👎 KeyboardEvent.charCode
👎 KeyboardEvent.keyCode
👎 KeyboardEvent.keyIdentifier
👎 KeyboardEvent.keyLocation
👎 KeyboardEvent.which

👍 KeyboardEvent.key

Unfortunately, KeyboardEvent.key does not yet have full browser support. Leaving the browsers without a reliable property for identifying keyboard event keys.

Locale Caveat

This utility interprets use of the shift key when inferring event key values. Example, an event describing shift+/ would result in a key value of ?. This logic assumes an en-US locale keyboard layout. This will not work if you are using a different locale such as a German layout where / is shift+7.