keyup events and reliably translate them into keyboard keys and characters.
npm i -S whatkey // or yarn add whatkey // or bower install whatkey
whatkey(event) - Takes in a keyboard event from
keydown and returns an object that has the following properties:
key- The keyboard key pressed. Does not take into account shift, so for example if you type 'A', this will contain 'a'.
char- The character created by the key press. Takes into account shift, so if you type 'A', this will contain 'A'. Note that in cases where there are multiple keys that give the same character, the simpler character is used (eg. if the
charwill be "\n")
whatkey.unprintableKeys** - An array of unprintable keys (including backspace and delete, which do usually modify inputs)
Special Key and character strings
char values contain the actual character typed ('a', '$', '\t', etc) except in the following cases where the character isn't printable.
The string on the left is the string that represents the conceptual key/character on the right:
- backspace - Backspace key. Note that the
charvalue for this will be '\b'
- enter - Enter key. Note that the
charvalue for this will be '\n'
- tab - Tab key. Note that the
charvalue for this will be '\t'
- shift - the shift key
- meta - windows / command key (here 'meta' is used since the character is named different things on mac vs windows)
- ctrl - control key
- alt - alt key
- pause - pause key
- caps - caps lock key
- esc - escape key
- num0 - Number pad key 0. Note that the
charvalue for this will be '0'.
- num1 - Number pad key 1. Note that the
charvalue for this will be '1'.
- num2 - ...
- num_enter - Number pad enter key. Note that the
charvalue for this will be '\n'.
- num_subtract - Number pad subtract key. Note that the
charvalue for this will be '-'.
- num_decimal - Number pad decimal key. Note that the
charvalue for this will be '.'.
- num_divide - Number pad divide key. Note that the
charvalue for this will be '/'.
- f1 - function key 1
- f2 - ...
- print - print-screen key
- num - num-lock
- scroll - scroll-lock
keypress vs keydown/keyup
In handling keyboard events, keydown/keyup is almost always the best choice. However, there is at least one case where you want keypress over keydown/keyup: cases where copy/paste is used. If you ctrl-v paste some text into a field, for example, a 'keydown' event will see 'shift' and 'v' pressed, while a keypress handler will see the actual text you pasted in.
There may be other cases where keypress is necessary, but I'm not aware of them.
If you do use keypress, keep in mind that the
key value is extrapolated from the
char value, and so may not accurately represent the key pressed.
If you need accuracy for the
key, use the 'keydown' event.
Released under the MIT license: http://opensource.org/licenses/MIT