I would like to let the user press a combination of keys and display the input in a readable way.
If the the pressed for example altP I would like to display alt P.
I know how to handle the modifier keys themselves but I couldn't find a solution for the "normal" keys. I tried to use the event.code property which gives me in this case KeyP (The event.key or event.which properties are not suitable as the modifier keys would change the value to eg π).
But I would have to map the value of event.code to P, especially for keys with special characters as they might have very different values on different layouts.
Is there a property to retrieve the displayed value of a key (the value printed on the physical keyboard without modifiers!) or a library to map the event.code to the displayed value for the most common keyboard layouts?
(Eg event.code = "Quote" mapped to Quote/" for American layout and to Ä for German layout)
window.onload = function () {
document.addEventListener("keydown", function(){
document.getElementById("keydownResult").innerText = event.code + " pressed. Value is " + event.key + ".";
// Procduces "KeyP pressed. Value is π." on macOS with german layout.
});
};
<p id="keydownResult"></p>