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:
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
Share Improve this question edited Aug 1, 2017 at 10:55 Philip Feldmann asked Aug 1, 2017 at 9:19 Philip FeldmannPhilip Feldmann 8,3757 gold badges44 silver badges66 bronze badges 5 |2 Answers
Reset to default 11The 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;
})
Since there is no character representation for control characters like up, down, left or right, you need to hardcode the character implementation in the code itself. I used Window.event.KeyCode event from document.onkeydown event listener and it works. Here is my solution:
window.onload = function() {
try {
var el = document.getElementById("#test");
var str = '';
document.onkeydown = function() {
var currentKey = window.event.keyCode;
switch (currentKey) {
case 40:
str = "down";
break;
case 37:
str = "left";
break;
case 39:
str = "right";
break;
case 38:
str = "up";
break;
}
event.preventDefault;
e1.innerHTML = str;
};
} catch (e) {
alert(e.message);
}
}
<div id="#test" />? Safari at least sees it as a DIV open tag with no closing tag, so error corrects to place everything after it into the div. – RobG Commented Aug 1, 2017 at 9:26