Apabila Mensimulasikan Keydown dalam Chrome, Mengapa Kunci yang Salah Didaftarkan?

Simulasi Keydown dalam Chrome Menyala Biasanya tetapi Bukan Kunci yang Betul

Mensimulasikan peristiwa keydown pada elemen textarea dalam Chrome adalah penting untuk interaksi pengguna yang disesuaikan. Walau bagaimanapun, percubaan tertentu mungkin membuahkan hasil yang tidak dijangka.

Anda cuba memulakan acara kekunci menggunakan initKeyboardEvent dengan Kod kunci yang diingini, tetapi kawasan teks akhirnya mendaftarkan nilai kunci yang salah (Masukkan bukannya huruf yang dimaksudkan). Pendekatan alternatif yang melibatkan penggantian harta juga terbukti tidak berjaya.

Untuk menangani isu ini, anda perlu mengatasi sifat 'mana' sebagai tambahan kepada 'Kod kunci'. Berikut ialah contoh kod yang diubah suai:

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

Dengan mengatasi kedua-dua 'keyCode' dan 'which', anda memastikan bahawa kod kunci yang betul dan kunci yang sepadan didaftarkan semasa acara keydown. Pendekatan ini membetulkan isu pendaftaran kunci yang salah dan membolehkan simulasi keydown yang tepat.

Atas ialah kandungan terperinci Apabila Mensimulasikan Keydown dalam Chrome, Mengapa Kunci yang Salah Didaftarkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!