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

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>

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!