Heim > Web-Frontend > js-Tutorial > Hauptteil

Warum wird beim Simulieren von Keydown in Chrome der falsche Schlüssel registriert?

Susan Sarandon
Freigeben: 2024-10-18 13:16:30
Original
941 Leute haben es durchsucht

When Simulating Keydown in Chrome, Why Does the Wrong Key Get Registered?

Keydown-Simulation in Chrome löst normal aus, aber nicht die richtige Taste

Die Simulation von Keydown-Ereignissen auf einem Textbereichselement in Chrome ist für maßgeschneiderte Benutzerinteraktionen unerlässlich. Bestimmte Versuche können jedoch zu unerwarteten Ergebnissen führen.

Sie haben versucht, mit initKeyboardEvent ein Keydown-Ereignis mit dem gewünschten KeyCode zu initiieren, aber der Textbereich hat am Ende einen falschen Schlüsselwert registriert (Enter anstelle des beabsichtigten Buchstabens). Ein alternativer Ansatz mit dem Überschreiben von Eigenschaften erwies sich ebenfalls als erfolglos.

Um dieses Problem zu beheben, müssen Sie zusätzlich zu „keyCode“ auch die Eigenschaft „which“ überschreiben. Hier ist ein modifiziertes Codebeispiel:

<code class="js">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
));

const Podium = {};
Podium.keydown = function(k) {
  const 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

Durch das Überschreiben von „keyCode“ und „which“ stellen Sie sicher, dass bei Keydown-Ereignissen der richtige Tastencode und der entsprechende Schlüssel registriert werden. Dieser Ansatz behebt das Problem der falschen Schlüsselregistrierung und ermöglicht genaue Keydown-Simulationen.

Das obige ist der detaillierte Inhalt vonWarum wird beim Simulieren von Keydown in Chrome der falsche Schlüssel registriert?. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage