如何覆盖'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中文网其他相关文章！