Maison > interface Web > js tutoriel > le corps du texte

Comment créer de manière fiable des événements de clavier dans Safari à l'aide de JavaScript ?

Mary-Kate Olsen
Libérer: 2024-11-13 08:37:02
original
841 Les gens l'ont consulté

How to Reliably Create Keyboard Events in Safari using JavaScript?

Création d'événements de clavier dans Safari à l'aide de JavaScript

Simuler des événements de clavier dans Safari à l'aide de JavaScript peut s'avérer difficile, comme le démontrent vos tentatives d'utilisation de documents .createEvent. Le problème vient du comportement incohérent de la propriété keyCode, qui est initialisée à 0 malgré vos efforts pour la définir à 115.

Pour résoudre ce problème, nous vous recommandons d'utiliser le polyfill DOM Keyboard Event Level 3, qui améliore le JavaScript. modèle d'événement pour prendre en charge les navigateurs modernes et offre une compatibilité descendante pour les propriétés héritées.

Avec ce polyfill, vous pouvez créer des événements de clavier comme ceci :

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 you need legacy property "keyCode"
// Note: In some browsers you can't overwrite "keyCode" property. (At least in Safari)
delete e.keyCode;
Object.defineProperty(e, "keyCode", {"value" : 666})
Copier après la connexion

Le polyfill prend en charge les propriétés héritées telles que keyCode, charCode , et qui, vous permettant de spécifier directement ces propriétés :

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

De plus, vous pouvez trouver une version multi-navigateurs de initKeyboardEvent dans un résumé séparé.

En utilisant ces techniques, vous peut créer et distribuer de manière fiable des événements de clavier dans Safari, garantissant un comportement cohérent sur différents navigateurs.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal