Comment simuler des événements de clavier dans Safari à l'aide de JavaScript ?

Simulation d'événements de clavier dans Safari : tirer parti de JavaScript et des propriétés héritées

Dans le domaine du développement Web, la simulation d'événements de saisie utilisateur est souvent nécessaire pour à des fins de tests et d’automatisation. Les événements de clavier ne font pas exception. Cependant, la création et le déclenchement d’événements de clavier dans Safari ont toujours posé des problèmes. Cet article explore les subtilités de l'émulation d'événements de clavier dans Safari à l'aide de JavaScript, en explorant diverses approches et leurs limites.

La première approche consiste à utiliser les méthodes JavaScript « createEvent » et « initKeyboardEvent ». Malgré les premières tentatives avec cette méthode, la propriété "keyCode" de l'objet événement reste définie sur 0 après l'exécution.

La deuxième méthode utilise les méthodes "createEvent" et "initUIEvent", en définissant manuellement la propriété "keyCode". . Cependant, cette méthode est également confrontée au problème susmentionné de la réinitialisation de la propriété "keyCode" à 0.

Pour surmonter ces limitations, une troisième approche incorporant un polyfill DOM Keyboard Event Level 3 est introduite. Avec ce polyfill, les développeurs peuvent simuler des événements de clavier comme suit :

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

Cette approche fournit un moyen plus fiable de simuler les événements de clavier dans Safari. De plus, le polyfill permet la personnalisation des propriétés héritées telles que « keyCode », « charCode » et « which ».

Propriétés héritées

Propriétés héritées telles que "keyCode" et "charCode" continuent d'être utilisés dans de nombreuses applications et scripts. Pour garantir la compatibilité entre navigateurs, le polyfill DOM Keyboard Event Level 3 prend également en charge ces propriétés. Par exemple, le code suivant montre la définition de la propriété « keyCode » dans le polyfill :

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

Grâce à ces fonctionnalités améliorées, les développeurs peuvent simuler en toute confiance des événements de clavier dans Safari, permettant ainsi des scénarios de test et d'automatisation plus robustes.

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!