Videos
It is impossible to reliably guess the key from the code, because the code refers to the physical key being pressed, while the value of key depends on the keyboard layout. For example on my german QWERTZ keyboard the key corresponding to the code 'BracketLeft' is 'ü' while on an american QWERTY keyboard it would be ']'.
If your goal is to tell your users which key to press to trigger some action you could try some other ways:
- Create an image of a keyboard on which the key is highlighted and display that as a hint
- Somehow get your users to press the key so you can observe the actual event and learn the appropiate
keyvalue that way - Create
code->keymappings for the keyboard layouts your users are most likely to use and guess the correct mapping depending on browser locale and/or observed keyboard events
None of these options are perfect but I think can get you pretty close.
I was trying to do the same thing as you, showing in the UI the current key values for the user that correspond to the KeyboardEvent.code (the physical key).
Short answer:
Not possible at the moment. It's probably better to use one of the suggestions made by @seabeast.
Long answer:
As today, there is a non-standardized way of getting this in Chrome based browsers: KeyBoardLayoutMap. Example from MDN:
Copywindow.addEventListener("keydown", function (e) {
const keyboard = navigator.keyboard;
keyboard.getLayoutMap().then((keyboardLayoutMap) => {
const keyValue = keyboardLayoutMap.get(e.code);
console.log(`code: ${e.code} <-> key: ${e.key} <-> result: ${keyValue}`);
});
});
This code would not be reliable for anything serious as keyboardLayoutMap.get() returns undefined for keys outside of the printable chars in the alphanumeric section. I've even found that in Chrome v93 is giving me swapped values for key < and º in a European Spanish layout.
My other failed attempt was to dispatch fake keyboard events before the user can do anything. The problem is you have to manually populate each property in the event object (i.e.: you have to know the code and key beforehand).
The specification says absolutely nothing about how the two might relate to each other in a consistent way.
Honestly not sure how a professional web app might be managing this kind of stuff, maybe as @seabeast said: an educated guess that connects the locale in window.navigator.language to a saved code->key map of its most common kb layout?
Conclusion:
If nothing of the previous suggestions satisfies you, you could always try to minimize confusion to the end-user. I'll probably:
- Stick to the
event.keyproperty. - Give user the possibility to rebind the keys to his/her needs.
- And try not to get too much creative with your default shortcut set. Just using the common ASCII/English characters in the alphanumeric section and maybe some of the function section if needed.
The reason is that the user can usually link those key values representations in your UI to a physical key on his/her keyboard, and when that fails he/she can rebind the key.