Comment remplacer la propriété « which » pour simuler efficacement les événements Keydown dans Chrome avec des valeurs de clé correctes ?

Simulation d'événements de frappe dans Chrome avec des valeurs de clé correctes

La simulation d'événements de frappe sur des éléments de page HTML peut présenter certains défis, en particulier lorsqu'il s'agit pour définir la valeur correcte du code clé dans Chrome. Pour résoudre ce problème, nous allons explorer une solution qui remplace efficacement la propriété « which » et permet la simulation du code clé souhaité.

Code initial et ses limitations

Le code initial tentait de simuler l'événement "keydown" en utilisant document.createEvent('KeyboardEvent') et en définissant divers paramètres, y compris le code clé. Cependant, le résultat était inexact, l'élément textarea recevant le code clé « Entrée » (13) au lieu de la lettre « m » prévue (code clé 77).

Remplacement de la propriété « which »

Pour résoudre ce problème, nous devons remplacer la propriété « which », qui fournit une autre manière de spécifier le code clé. Voici un exemple de code qui intègre ce correctif :

<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>

Principales fonctionnalités du code :

• L'écouteur d'événement "keydown" est ajouté au document .
• La fonction Podium.keydown() crée un objet KeyboardEvent et remplace les propriétés « keyCode » et « which » pour garantir la valeur correcte du code clé.
• Elle initialise ensuite le KeyboardEvent à l'aide de initKeyboardEvent () ou initKeyEvent() en fonction de la prise en charge du navigateur.
• La propriété "keyCodeVal" est définie sur la valeur de code clé souhaitée.
• L'événement est envoyé au document.

Utilisation :

Pour simuler l'événement keydown pour la lettre "a" (code clé 65), appelez simplement Podium.keydown(65).

Conclusion :

En remplaçant la propriété « which », nous pouvons simuler efficacement les événements de frappe dans Chrome avec les valeurs de code clé correctes. Cette méthode nous permet d'interagir avec précision avec les éléments de la zone de texte et de saisir les données comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!