Find out KeyboardEvent.key by KeyboardEvent.code

Question

There are 2 properties for KeyboardEvent:

• KeyboardEvent.key
• KeyboardEvent.code

How to get key having code without having the event itself? So I only have the code value outside of the event and want to know what key is associated with it.

Answer 1

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:

window.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:

1. Stick to the event.key property.
2. Give user the possibility to rebind the keys to his/her needs.
3. 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.