Comment simuler des événements de clavier dans Safari avec une propagation précise du code clé ?

Simulation d'événements de clavier dans Safari avec JavaScript

Lorsqu'ils tentent de simuler des événements de clavier dans Safari à l'aide d'approches conventionnelles, les développeurs rencontrent souvent des problèmes avec les codes de touches définis sur zéro au lieu de la valeur souhaitée. Cependant, il existe une solution fiable disponible en utilisant le polyfill DOM Keyboard Event Level 3 de JavaScript.

DOM Keyboard Event Level 3 Polyfill

Le polyfill DOM Keyboard Event Level 3 permet aux développeurs de créer et de distribuer des événements de clavier. avec une compatibilité améliorée. Pour utiliser ce polyfill, suivez ces étapes :

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

Propriétés héritées

Si vous avez besoin de propriétés héritées telles que "keyCode", "charCode" et "which", le polyfill mis à jour est entièrement mis à jour. les soutient. Initialisez simplement KeyboardEvent comme suit :

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

Options alternatives

Pour une compatibilité entre navigateurs, envisagez d'utiliser la méthode initKeyboardEvent alternative suivante :

function initKeyboardEvent(type, bubbles, cancelable, view, key, location, modifiersList, repeat, locale) {
    var evt = document.createEvent("KeyboardEvent");
    evt.initKeyboardEvent(type, bubbles, cancelable, view, key, location, modifiersList, repeat, locale);
    return evt;
}

Conclusion

En tirant parti du polyfill DOM Keyboard Event Level 3 ou de la méthode alternative initKeyboardEvent, vous peut désormais créer et distribuer de manière fiable des événements de clavier dans Safari, garantissant ainsi une propagation précise du code clé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!