A simple utility for determining the KeyboardEvent.key property from a keyboard event.
yarn add keyboard-key
# or
npm install keyboard-key
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
keyvalues.
You can also get the normalized keyCode from an event. @fluentui/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;
}
});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.
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.