event.key 在移动浏览器中未定义用于 KeyUp、Keydown 和 KeyPress



下面的代码应该简单地抑制任何按键并将按下的键添加到div中。这在桌面上工作正常,但在移动设备(safari 和 chrome(上event.key未定义。

<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.keyCodeevent.keyIdentifier都可用,但将它们转换为字符串会在不同的键盘布局和语言上给我带来不需要的结果,尤其是特殊字符。

有没有办法直接获取密钥的值?

下面是一个代码笔示例,以防万一:https://codepen.io/anon/pen/pryYyQ

唯一的解决方法是获取密钥代码并将其转换为字符串:

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;
})

由于控制字符(如向上、向下、向左或向右(没有字符表示形式,因此需要在代码本身中对字符实现进行硬编码。我使用了来自document.onkeydown事件侦听器的Window.event.KeyCode事件,它可以工作。 这是我的解决方案:

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);
}
}

最新更新