event.key is undefined in mobile browsers for keyup, keydown and keypress
The following code is supposed to simply suppress any key press and add the pressed key to a div instead. This works fine on desktop, however on mobile (safari and chrome) event.key is undefined.
<html>
<head></head>
<body>
<input />
<div id="#test"></div>
<script>
var str = '';
var el = document.getElementById('#test');
document.addEventListener('keypress', function(event) {
str += event.key;
event.preventDefault();
el.innerHTML = str;
})
</script>
</body>
</html>
event.keyCode and event.keyIdentifier are both available but casting those to a string will give me unwanted results on different keyboard layouts and languages, especially with special characters.
Is there anyway to get the value of the key directly?
Here's a codepen example just in case: https://codepen.io/anon/pen/pryYyQ
Answer
The only workaround is to get the keycode and cast it to String:
var str = '';
var el = document.getElementById('#test');
document.addEventListener('keypress', function(event) {
const currentCode = event.which || event.code;
let currentKey = event.key;
if (!currentKey) {
currentKey = String.fromCharCode(currentCode);
}
str += currentKey;
event.preventDefault();
el.innerHTML = str;
})