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

Phi*_*ann 8 javascript keylistener mobile-safari mobile-chrome

以下代码应该简单地禁止任何按键并将按下的键添加到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>
Run Code Online (Sandbox Code Playgroud)

event.keyCode并且event.keyIdentifier都可用但是将它们转换为字符串会在不同的键盘布局和语言上给出不必要的结果,特别是对于特殊字符.

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

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

Phi*_*ann 7

唯一的解决方法是获取密钥代码并将其转换为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;
})
Run Code Online (Sandbox Code Playgroud)

  • 这不适用于像“event.key=='Enter'”这样的东西 (2认同)