Current Internet Explorer and Microsoft Edge, as well as Firefox 36 and older (mainly), suffer from non-standard event.key values. This shim fixes most (or at least the most common) of those. It does not polyfill event.key unless it exist natively, but it plays well with polyfills that do, such as keyboardevent-key-polyfill. (Edit: Turns out the polyfill does not play well with us and forcefully overwrites the IE & Edge native event.key #20)
npm install --save keyboardevent-key-standardiser-shimThe shim self-executes. Simply import it or require it.
import 'keyboardevent-key-standardiser-shim';| Input | Standard key | IE | Edge | Firefox |
|---|---|---|---|---|
| Up | ArrowUp | current | current | 36 |
| Down | ArrowDown | current | current | 36 |
| Left | ArrowLeft | current | current | 36 |
| Right | ArrowRight | current | current | 36 |
| Del | Delete | current | current | 36 |
| Crsel | CrSel | 11? | ? | 36 |
| Exsel | ExSel | 11? | ? | 36 |
| Esc | Escape | current | current | 36 |
| Apps | ContextMenu | current | current | 36 |
| OS | Meta | - | - | current |
| Win 1 | Meta | current | current | - |
| Scroll | ScrollLock | current | current | - |
| Spacebar | ' ' | current | ? | 36 |
| Nonconvert | Nonconvert | 11? | ? | 36 |
| Decimal 2 | . or , (regional) | current | current | 28 |
| Separator 2 | , or . (regional) | current | current | 28 |
| Multiply | * | current | current | 28 |
| Add | + | current | current | 28 |
| Divide | / | current | current | 28 |
| Subtract | - | current | current | 28 |
| MediaNextTrack | MediaTrackNext | current | current | 36 |
| MediaPreviousTrack | MediaTrackPrevious | current | current | 36 |
| MediaFastForward | FastFwd | ? | ? | 36 |
| Live | TV | ? | ? | 36 |
| Zoom | ZoomToggle | 11? | ? | 36 |
| SelectMedia | LaunchMediaPlayer | current | current | 36 |
| MediaSelect 3 | LaunchMediaPlayer | - | - | 37 - 48 |
| VolumeUp 3 | AudioVolumeUp | current | current | 48 |
| VolumeDown 3 | AudioVolumeDown | current | current | 48 |
| VolumeMute 3 | AudioVolumeMute | current | current | 48 |
1 Note that event.metaKey is normally set to false on windows, even when Meta (Win) is pressed.
2 It should be possible to use event.locale to dynamically map Decimal and Separator to the regionally correct keys.
3 Firefox 37+ will be considered by the shim as standard complient, so if you need this key on FF 37-48, considering checking for it specifically.
If you have the possibility to test complience of keys marked with a question mark, or if you find other browsers returning non-standard keys, then please report your findings (e.g. by opening an issue).
So far the shim and standard compatibility has been tested on:
- IE 11 (current)
- Edge 14, 16 (current)
- Firefox 23, 29, 36, 37, 55, 59 (current)
- Chrome 65 (current)
- Firefox 23 - 28 returns "mozPrintableKey" for any printable key.
It does not seem possible to directly determine whether KeyboardEvent.prototype.key follows the latest standard, without listening to physical keyboard events. This shim therefore replaces the native getter and returns a standard-complient key. Furthermore, if it notices a verified good key (keys that in practice only standard complient browsers return), it unloads itself and restores fully native event.key handling.
The shim exports the KEYMAP as well as the VERIFIED_KEYS, in case you need to configure either.
This does not fix all event.key issues and bugs with older browser. E.g. Internet Explorer reports "Unidentified" for multiple non-latin modifier keys. Also, some browsers may in rare cases return the wrong key value, such as Firefox returning "AltGraph" instead of "ModeChange".