logo标签列表

移动浏览器中的keyup、keydown和keypress事件中，event.key未定义。

javascriptmobile-safarikeylistenermobile-chrome
23
以下代码的作用是阻止任何按键事件并将按下的键添加到一个 div 中。在桌面上运行良好，但在移动端（Safari 和 Chrome）中，event.key 未定义。

以下代码旨在简单地抑制任何按键事件，并将按下的键添加到一个 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都可以使用，但将它们强制转换为字符串会导致在不同的键盘布局和语言环境下产生意想不到的结果，尤其是对于特殊字符。

有没有一种直接获取按键值的方法？

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

你使用的是什么类型的设备和键盘？ - Aron
在iPhone 6的Safari和Chrome、Nexus 6的Chrome、One Plus 3和3T的Chrome以及Honeywell Android扫描仪上测试，同时使用每个操作系统的集成扫描仪作为输入和本地数字键盘。但是在任何设备上都无法正常工作。 - Philip Feldmann
你可以从有效的HTML开始。解析器会如何处理<div id="#test" />？至少Safari将其视为没有结束标签的DIV开放标签，因此会纠正错误并将其后面的所有内容放入该DIV中。 - RobG
这只是一个演示，用于测试更大应用程序的错误。我已经更改了标记以使其有效，但正如我所说，错误不在于选择器未定义，而在于事件的键属性，该属性绑定到文档。 - Philip Feldmann
1
五年后，Chrome 这个问题怎么还存在？ - knarf
2个回答
11
唯一的解决方法是获取键码并将其转换为字符串：
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键？我想要所有的按键。 - Carsen Daniel Yates
2
这种情况下，使用 event.key=='Enter' 是行不通的。 - oriadam
0

由于像上、下、左或右这样的控制字符没有字符表示形式，您需要在代码本身中硬编码字符实现。我使用了 window.event.keyCode 事件和 document.onkeydown 事件监听器，它可以正常工作。 这是我的解决方案：

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);
  }
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接