event.key 在移动浏览器中未定义 keyup、keydown 和 keypress答案

【问题标题】：event.key is undefined in mobile browsers for keyup, keydown and keypressevent.key 在移动浏览器中未定义 keyup、keydown 和 keypress
【发布时间】：2018-01-08 02:00:39
【问题描述】：

下面的代码应该简单地抑制任何按键并将按下的键添加到 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.keyCode 和 event.keyIdentifier 都可用，但将它们转换为字符串会在不同的键盘布局和语言（尤其是特殊字符）上给我带来不想要的结果。

有没有办法直接获取key的值？

这是一个 codepen 示例以防万一：https://codepen.io/anon/pen/pryYyQ

【问题讨论】：

您使用的是哪种设备和键盘？
在 iPhone 6 Safari 和 Chrome、Nexus 6 Chrome、One Plus 3 和 3T Chrome 以及霍尼韦尔 Android 扫描仪以及 Chrome 上使用集成扫描仪作为输入和每个操作系统的本机数字键盘进行了测试。不适用于任何设备。
您可以从有效的 html 开始。解析器对<div id="#test" /> 做了什么？ Safari 至少将它视为一个没有结束标签的 DIV 打开标签，因此可以更正错误以将其后的所有内容放入 div 中。
这只是一个演示，用于测试更大应用程序的错误。我已经将标记更改为有效，但就像我说的那样，错误不是选择器未定义而是事件的键属性，它绑定到文档。

标签： javascript mobile-safari keylistener mobile-chrome

【解决方案1】：

唯一的解决方法是获取键码并将其转换为字符串：

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

【讨论】：

如果是，我将如何解析，比如 CTRL 键或 ESC 键？我想要所有的钥匙。
这不适用于event.key=='Enter'

【解决方案2】：

由于上、下、左或右等控制字符没有字符表示，因此您需要在代码本身中对字符实现进行硬编码。我使用了来自 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);
  }
}

【讨论】：