ホームページ  >  記事  >  ウェブフロントエンド  >  Chrome でキーダウンをシミュレートすると、間違ったキーが登録されるのはなぜですか?

Chrome でキーダウンをシミュレートすると、間違ったキーが登録されるのはなぜですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-10-18 13:16:30838ブラウズ

When Simulating Keydown in Chrome, Why Does the Wrong Key Get Registered?

Chrome でのキーダウン シミュレーションは正常に実行されるが、正しいキーではない

Chrome の textarea 要素でのキーダウン イベントのシミュレーションは、カスタマイズされたユーザー インタラクションに不可欠です。ただし、特定の試行では予期しない結果が生じる可能性があります。

目的の keyCode を指定して initKeyboardEvent を使用してキーダウン イベントを開始しようとしましたが、テキストエリアに間違ったキー値 (意図した文字ではなく Enter) が登録されてしまいました。プロパティのオーバーライドを伴う別のアプローチも失敗したことが判明しました。

この問題に対処するには、「keyCode」に加えて「that」プロパティをオーバーライドする必要があります。変更されたコード サンプルは次のとおりです。

<code class="js">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
));

const Podium = {};
Podium.keydown = function(k) {
  const 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>

「keyCode」と「what」の両方をオーバーライドすることで、キーダウン イベント中に正しいキー コードと対応するキーが確実に登録されます。このアプローチにより、誤ったキー登録の問題が修正され、正確なキーダウン シミュレーションが可能になります。

以上がChrome でキーダウンをシミュレートすると、間違ったキーが登録されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。