How to Override the \'which\' Property to Effectively Simulate Keydown Events in Chrome with Correct Key Values?

Simulation of Keydown Events in Chrome with Correct Key Values

Simulating keydown events on HTML page elements can present some challenges, especially when it comes to setting the correct key code value in Chrome. To address this issue, we will delve into a solution that effectively overrides the "which" property and allows for the desired key code simulation.

Initial Code and Its Limitations

The initial code attempted to simulate the "keydown" event using document.createEvent('KeyboardEvent') and setting various parameters, including the key code. However, the result was inaccurate, with the textarea element receiving the "Enter" key code (13) instead of the intended letter "m" (key code 77).

Overriding the "which" Property

To rectify this issue, we need to override the "which" property, which provides an alternative way to specify the key code. Here's an example code that incorporates this fix:

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

Key Features of the Code:

• The "keydown" event listener is added to the document.
• The Podium.keydown() function creates a KeyboardEvent object and overrides the "keyCode" and "which" properties to ensure the correct key code value.
• It then initializes the KeyboardEvent using initKeyboardEvent() or initKeyEvent() based on browser support.
• The "keyCodeVal" property is set to the desired key code value.
• The event is dispatched to the document.

Usage:

To simulate the keydown event for the letter "a" (key code 65), simply call Podium.keydown(65).

Conclusion:

By overriding the "which" property, we can effectively simulate keydown events in Chrome with the correct key code values. This method allows us to accurately interact with textarea elements and input data as intended.

The above is the detailed content of How to Override the \'which\' Property to Effectively Simulate Keydown Events in Chrome with Correct Key Values?. For more information, please follow other related articles on the PHP Chinese website!