@iqvizyonui/keyboard-key

@iqvizyonui/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. @iqvizyonui/keyboard-key includes a hash of key names to keyCodes for easy comparisons:

document.addEventListener('keydown', event => {
  const code = 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.