☰

モバイルブラウザでは、keyup、keydown、keypress の event.key が未定義です。質問する

tag-icon • tag-icon javascript mobile-safari keylistener mobile-chrome
モバイルブラウザでは、keyup、keydown、keypress の 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

ベストアンサー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;
})

おすすめ記事