keyboard-key

What is keyboard-key?

The keyboard-key npm package is a utility for working with keyboard events in JavaScript. It provides a simple way to get the key name from a keyboard event, which can be useful for handling keyboard shortcuts and other keyboard interactions in web applications.

What are keyboard-key's main functionalities?

Get Key Name from Event

This feature allows you to get the name of the key that was pressed during a keyboard event. The `getKey` function takes a keyboard event as an argument and returns the name of the key.

const key = require('keyboard-key');
document.addEventListener('keydown', (event) => {
  const keyName = key.getKey(event);
  console.log(`Key pressed: ${keyName}`);
});

Check if Key is a Modifier

This feature allows you to check if the key pressed is a modifier key (e.g., Shift, Control, Alt). The `isModifier` function takes a keyboard event as an argument and returns a boolean indicating whether the key is a modifier.

const key = require('keyboard-key');
document.addEventListener('keydown', (event) => {
  if (key.isModifier(event)) {
    console.log('Modifier key pressed');
  }
});

Other packages similar to keyboard-key

keycode

The keycode package provides a way to convert between keyboard key names and their corresponding key codes. It offers similar functionality to keyboard-key but focuses more on key code conversions.

mousetrap

Mousetrap is a library for handling keyboard shortcuts in JavaScript. It provides more advanced features for binding and handling keyboard shortcuts compared to keyboard-key, which is more focused on key name retrieval.

hotkeys-js

Hotkeys-js is a library for handling keyboard shortcuts in JavaScript. It offers a more comprehensive set of features for managing keyboard shortcuts, including support for key combinations and sequences, compared to the more basic functionality of keyboard-key.

README

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.

:-1: KeyboardEvent.char
:-1: KeyboardEvent.charCode
:-1: KeyboardEvent.keyCode
:-1: KeyboardEvent.keyIdentifier
:-1: KeyboardEvent.keyLocation
:-1: KeyboardEvent.which

:+1: 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.