Handling keypress and providing visual feedback

[Utopiah]

Here is a quick basic example for the visual feedback

document.addEventListener('keydown', function(event) { 
    var key=event.key;
    document.querySelector("[key-value="+key+"]").setAttribute("color", "grey");
    setTimeout( () => { document.querySelector("[key-value="+key+"]").setAttribute("color", "#263238")
}, 100 ); });

It doesn't add content to the target element but using something like

var target = document.querySelector("[placeholder=Username]");
// surely there is a proper way to get the current input element instead
target.setAttribute("value", target.getAttribute("value") + "a");

Also I think being able to provide a layout system as I have for example a Microsoft Sculpt Ergonomic keyboard would help to get the exact same mapping which matters more when there is no pass through camera (i.e fine for Vive for not for Rift or WMR).