wake-up-neo.com

event.key ist in mobilen Browsern für keyup, keydown und keypress nicht definiert

Der folgende Code soll lediglich einen Tastendruck unterdrücken und die gedrückte Taste stattdessen zu einem div hinzufügen. Dies funktioniert gut auf dem Desktop, auf dem Handy (Safari und Chrome) ist event.key jedoch nicht definiert.

<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 und event.keyIdentifier sind zwar verfügbar, die Umwandlung in einen String führt jedoch zu unerwünschten Ergebnissen bei verschiedenen Tastaturlayouts und -sprachen, insbesondere bei Sonderzeichen.

Gibt es trotzdem den Wert des Schlüssels direkt abzurufen?

Hier ist ein Codepen-Beispiel für alle Fälle: https://codepen.io/anon/pen/pryYyQ

6
Philip Feldmann

Die einzige Problemumgehung besteht darin, den Schlüsselcode abzurufen und in String umzuwandeln:

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

Da es keine Zeichendarstellung für Steuerzeichen wie oben, unten, links oder rechts gibt, müssen Sie die Zeichenimplementierung im Code selbst hart codieren. Ich habe Window.event.KeyCode event aus document.onkeydown event-Listener verwendet und es funktioniert. Hier ist meine Lösung:

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