Rumah > hujung hadapan web > tutorial js > Apabila Mensimulasikan Keydown dalam Chrome, Mengapa Kunci yang Salah Didaftarkan?

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

Susan Sarandon
Lepaskan: 2024-10-18 13:16:30
asal
979 orang telah melayarinya

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

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>
Salin selepas log masuk

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!

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan