Bagaimana untuk Mensimulasikan Acara Papan Kekunci dalam Safari Menggunakan JavaScript?

Mensimulasikan Acara Papan Kekunci dalam Safari Menggunakan JavaScript

Dalam percubaan untuk mensimulasikan peristiwa papan kekunci dalam penyemak imbas Safari, dua pendekatan telah diuji menggunakan JavaScript:

Pendekatan 1:

var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 115, 0);

Pendekatan 2:

var event = document.createEvent("UIEvents");
event.initUIEvent("keypress", true, true, window, 1);
event.keyCode = 115;

Walau bagaimanapun, selepas melaksanakan salah satu kod, kod kunci objek acara/yang sifatnya kekal ditetapkan kepada 0, menunjukkan simulasi yang tidak berjaya.

Penyelesaian:

Menurut Acara Papan Kekunci DOM Tahap 3 polyfill, pendekatan berikut boleh digunakan:

element.addEventListener("keydown", function(e){ console.log(e.key, e.char, e.keyCode) })

var e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, key : "Q", char : "Q", shiftKey : true});
element.dispatchEvent(e);

// If the legacy "keyCode" property is required:
delete e.keyCode;
Object.defineProperty(e, "keyCode", {"value" : 666})

Kemas Kini Tambahan:

Polyfill Acara Papan Kekunci DOM Tahap 3 kini menyokong sifat warisan:

var e = new KeyboardEvent("keydown", {
    bubbles : true,
    cancelable : true,
    char : "Q",
    key : "q",
    shiftKey : true,
    keyCode : 81
});

Untuk keserasian merentas pelayar, fungsi initKeyboardEvent berikut boleh digunakan di luar polyfill:

function initKeyboardEvent(type, bubbles, cancelable, view, key, location, modifiers, repeat) {
  var event = document.createEvent("KeyboardEvent");
  event.initKeyboardEvent(type, bubbles, cancelable, view, key, location, modifiers, repeat, false, false, false, false, false, false, 0);
  return event;
}

Rujuk contoh dan demo yang disediakan untuk ilustrasi lanjut.

Atas ialah kandungan terperinci Bagaimana untuk Mensimulasikan Acara Papan Kekunci dalam Safari Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!