web-dev-qa-db-ja.com

event.keyは、モバイルブラウザではkeyup、keydown、keypressに対して未定義です。

次のコードは、キーの押し下げを抑制し、押したキーをdivに追加することを想定しています。これはデスクトップでは正常に動作しますが、モバイル（サファリおよびクロム）では機能します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

javascriptmobile-safarikeylistenermobile-chrome
9
Philip Feldmann

唯一の回避策は、キーコードを取得して文字列にキャストすることです。

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

上、下、左、右などの制御文字の文字表現がないため、コード自体に文字の実装をハードコーディングする必要があります。私はWindow.event.KeyCodedocument.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);
  }
}
0
Harrykesh Ramma