如何覆寫'which”屬性以使用正確的鍵值有效模擬 Chrome 中的按鍵事件？

使用正確的鍵值在Chrome 中模擬Keydown 事件

在HTML 頁面元素上模擬keydown 事件可能會帶來一些挑戰，尤其是當它出現時在Chrome 中設定正確的鍵代碼值。為了解決這個問題，我們將深入研究一種解決方案，該解決方案可以有效地覆蓋「which」屬性並允許所需的關鍵程式碼模擬。

初始程式碼及其限制

初始程式碼嘗試使用 document.createEvent('KeyboardEvent') 模擬「keydown」事件並設定各種參數，包括按鍵碼。但是，結果不準確，textarea 元素接收的是「Enter」鍵代碼 (13)，而不是預期的字母「m」（鍵代碼 77）。

覆蓋「which」屬性

為了修正這個問題，我們需要重寫「which」屬性，它提供了另一種指定金鑰程式碼的方法。以下是包含此修復的範例程式碼：

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

程式碼的主要功能：

• 「keydown」事件偵聽器已新增至文件中.
• Podium.keydown() 函數建立一個KeyboardEvent 物件並覆寫「keyCode」和「which」屬性以確保正確的鍵碼值。
• 然後使用 initKeyboardEvent 初始化 KeyboardEvent () 或 initKeyEvent() 基於瀏覽器支援。
• 「keyCodeVal」屬性設定為所需的鍵碼值。
• 事件被分派到文件。

用法：

要模擬字母「a」（按鍵碼 65）的 keydown 事件，只需呼叫 Podium.keydown(65)。

結論：

透過覆寫「which」屬性，我們可以使用正確的鍵碼值有效地模擬 Chrome 中的 keydown 事件。該方法使我們能夠準確地與 textarea 元素互動並按預期輸入資料。

以上是如何覆寫'which”屬性以使用正確的鍵值有效模擬 Chrome 中的按鍵事件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！