Bagaimana untuk Mengatasi Harta \'mana\' untuk Mensimulasikan Peristiwa Keydown dengan Berkesan dalam Chrome dengan Nilai Kekunci yang Betul?

Simulasi Acara Keydown dalam Chrome dengan Nilai Kunci yang Betul

Simulasi acara keydown pada elemen halaman HTML boleh memberikan beberapa cabaran, terutamanya apabila ia datang untuk menetapkan nilai kod kunci yang betul dalam Chrome. Untuk menangani isu ini, kami akan menyelidiki penyelesaian yang mengatasi sifat "yang" dengan berkesan dan membenarkan simulasi kod kunci yang diingini.

Kod Awal dan Hadnya

Kod awal cuba mensimulasikan peristiwa "keydown" menggunakan document.createEvent('KeyboardEvent') dan menetapkan pelbagai parameter, termasuk kod kunci. Walau bagaimanapun, keputusannya adalah tidak tepat, dengan elemen textarea menerima kod kunci "Masukkan" (13) dan bukannya huruf "m" yang dimaksudkan (kod kunci 77).

Mengatasi Harta "yang"

Untuk membetulkan isu ini, kita perlu mengatasi sifat "mana", yang menyediakan cara alternatif untuk menentukan kod kunci. Berikut ialah contoh kod yang menggabungkan pembetulan ini:

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

Ciri Utama Kod:

• Pendengar acara "keydown" ditambahkan pada dokumen .
• Fungsi Podium.keydown() mencipta objek KeyboardEvent dan mengatasi sifat "keyCode" dan "which" untuk memastikan nilai kod kunci yang betul.
• Ia kemudiannya memulakan KeyboardEvent menggunakan initKeyboardEvent () atau initKeyEvent() berdasarkan sokongan penyemak imbas.
• Harta "keyCodeVal" ditetapkan kepada nilai kod kunci yang dikehendaki.
• Acara dihantar ke dokumen.

Penggunaan:

Untuk mensimulasikan acara keydown untuk huruf "a" (kod kekunci 65), cuma panggil Podium.keydown(65).

Kesimpulan:

Dengan mengatasi sifat "mana", kami boleh mensimulasikan peristiwa keydown dalam Chrome dengan berkesan dengan nilai kod kunci yang betul. Kaedah ini membolehkan kami berinteraksi dengan tepat dengan elemen textarea dan data input seperti yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Harta 'mana' untuk Mensimulasikan Peristiwa Keydown dengan Berkesan dalam Chrome dengan Nilai Kekunci yang Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!