Heim > Web-Frontend > js-Tutorial > Wie überschreibe ich die Eigenschaft „which', um Keydown-Ereignisse in Chrome effektiv mit korrekten Schlüsselwerten zu simulieren?

Wie überschreibe ich die Eigenschaft „which', um Keydown-Ereignisse in Chrome effektiv mit korrekten Schlüsselwerten zu simulieren?

DDD
Freigeben: 2024-10-18 12:37:03
Original
858 Leute haben es durchsucht

How to Override the

Simulation von Keydown-Ereignissen in Chrome mit korrekten Schlüsselwerten

Die Simulation von Keydown-Ereignissen auf HTML-Seitenelementen kann einige Herausforderungen mit sich bringen, insbesondere wenn es darum geht um den richtigen Schlüsselcodewert in Chrome festzulegen. Um dieses Problem anzugehen, werden wir uns mit einer Lösung befassen, die die „which“-Eigenschaft effektiv überschreibt und die gewünschte Schlüsselcodesimulation ermöglicht.

Anfangscode und seine Einschränkungen

Der ursprüngliche Code versuchte, das „keydown“-Ereignis mithilfe von document.createEvent('KeyboardEvent') und dem Festlegen verschiedener Parameter, einschließlich des Tastencodes, zu simulieren. Das Ergebnis war jedoch ungenau, da das Textarea-Element den „Enter“-Tastencode (13) anstelle des vorgesehenen Buchstabens „m“ (Tastencode 77) erhielt.

Überschreiben der „which“-Eigenschaft

Um dieses Problem zu beheben, müssen wir die Eigenschaft „which“ überschreiben, die eine alternative Möglichkeit zur Angabe des Schlüsselcodes bietet. Hier ist ein Beispielcode, der diesen Fix enthält:

<code class="javascript">document.addEventListener('keydown', e => console.log(
  'altKey                : ' + e.altKey + '\n' +
  'charCode (Deprecated) : ' + e.charCode + '\n' +
  'code                  : ' + e.code + '\n' +
  'ctrlKey               : ' + e.ctrlKey + '\n' +
  'isComposing           : ' + e.isComposing + '\n' +
  'key                   : ' + e.key + '\n' +
  'keyCode (Deprecated)  : ' + e.keyCode + '\n' +
  'location              : ' + e.location + '\n' +
  'metaKey               : ' + e.metaKey + '\n' +
  'repeat                : ' + e.repeat + '\n' +
  'shiftKey              : ' + e.shiftKey + '\n' +
  'which (Deprecated)    : ' + e.which + '\n' +
  'isTrusted             : ' + e.isTrusted + '\n' +
  'type                  : ' + e.type
));

Podium = {};
Podium.keydown = function(k) {
  var oEvent = document.createEvent('KeyboardEvent');

  // Chromium Hack
  Object.defineProperty(
    oEvent,
    'keyCode',
    {
       get : function() {
         return this.keyCodeVal;
       }
    }
  );
  Object.defineProperty(
    oEvent,
    'which',
    {
       get : function() {
         return this.keyCodeVal;
       }
    }
  );

  if (oEvent.initKeyboardEvent) {
    oEvent.initKeyboardEvent("keydown", true, true, document.defaultView,
                             false, false, false, false, k, k);
  }
  else {
      oEvent.initKeyEvent("keydown", true, true, document.defaultView,
                          false, false, false, false, k, 0);
  }

  oEvent.keyCodeVal = k;

  if (oEvent.keyCode !== k) {
    alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
  }

  document.dispatchEvent(oEvent);
}

//Sample usage
Podium.keydown(65);</code>
Nach dem Login kopieren

Hauptfunktionen des Codes:

  • Der Ereignis-Listener „keydown“ wird dem Dokument hinzugefügt .
  • Die Funktion Podium.keydown() erstellt ein KeyboardEvent-Objekt und überschreibt die Eigenschaften „keyCode“ und „which“, um den korrekten Tastencodewert sicherzustellen.
  • Anschließend wird das KeyboardEvent mit initKeyboardEvent initialisiert () oder initKeyEvent() basierend auf der Browserunterstützung.
  • Die Eigenschaft „keyCodeVal“ wird auf den gewünschten Schlüsselcodewert gesetzt.
  • Das Ereignis wird an das Dokument gesendet.

Verwendung:

Um das Keydown-Ereignis für den Buchstaben „a“ (Tastencode 65) zu simulieren, rufen Sie einfach Podium.keydown(65) auf.

Fazit:

Durch Überschreiben der „which“-Eigenschaft können wir Keydown-Ereignisse in Chrome effektiv mit den richtigen Tastencodewerten simulieren. Diese Methode ermöglicht es uns, wie beabsichtigt genau mit Textbereichselementen zu interagieren und Daten einzugeben.

Das obige ist der detaillierte Inhalt vonWie überschreibe ich die Eigenschaft „which', um Keydown-Ereignisse in Chrome effektiv mit korrekten Schlüsselwerten zu simulieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage