Chrome で正しいキー値を使用してキーダウン イベントを効果的にシミュレートするために \'that\' プロパティをオーバーライドする方法

正しいキー値を使用した Chrome でのキーダウン イベントのシミュレーション

HTML ページ要素でのキーダウン イベントのシミュレーションは、特にキーダウン イベントが発生した場合に、いくつかの課題を引き起こす可能性があります。 Chrome で正しいキーコード値を設定するには。この問題に対処するために、「what」プロパティを効果的にオーバーライドし、目的のキー コード シミュレーションを可能にするソリューションを詳しく掘り下げます。

初期コードとその制限

最初のコードは、document.createEvent('KeyboardEvent') を使用し、キー コードを含むさまざまなパラメーターを設定して、「keydown」イベントをシミュレートしようとしました。ただし、結果は不正確で、textarea 要素が意図した文字 "m" (キー コード 77) ではなく "Enter" キー コード (13) を受け取りました。

この問題を修正するには、キー コードを指定する別の方法を提供する「that」プロパティをオーバーライドする必要があります。この修正を組み込んだコード例を次に示します。

コードの主な機能:

<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」プロパティと「what」プロパティをオーバーライドして、正しいキーコード値を確保します。
• 次に、initKeyboardEvent を使用して KeyboardEvent を初期化します。 () または initKeyEvent() は、ブラウザーのサポートに基づいています。
• 「keyCodeVal」プロパティは、必要なキー コード値に設定されます。
• イベントはドキュメントに送出されます。
• 使用法:

文字「a」(キーコード65)のキーダウンイベントをシミュレートするには、Podium.keydown(65)を呼び出すだけです。

結論:

「what」プロパティをオーバーライドすることで、正しいキー コード値を使用して Chrome のキーダウン イベントを効果的にシミュレートできます。このメソッドを使用すると、textarea 要素を正確に操作し、意図したとおりにデータを入力できます。

以上がChrome で正しいキー値を使用してキーダウン イベントを効果的にシミュレートするために 'that' プロパティをオーバーライドする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。