Question

以下代码应该简单地禁止任何按键并将按下的键添加到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都可用，但将其转换为字符串会在不同的键盘布局和语言上产生不必要的结果，尤其是使用特殊字符时。

无论如何直接获得密钥的价值？

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

Answer 1

唯一的解决方法是获取密码并将其强制转换为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;
})

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

对于keyup，keydown和keypress，在移动浏览器中未定义event.key

2 个答案: