Comment puis-je gérer les événements de clic sur les éléments d'entrée désactivés dans les navigateurs ?

Gestion des événements pour les éléments d'entrée désactivés

Les éléments d'entrée désactivés, par nature, ne répondent pas aux événements de la souris. Alors que la plupart des navigateurs autorisent la propagation des événements à partir d'éléments désactivés dans l'arborescence DOM, ce comportement est incompatible avec Firefox. Trouver une solution efficace qui fonctionne sur tous les navigateurs peut s'avérer difficile.

Une solution multi-navigateurs

Pour obtenir une compatibilité entre navigateurs, envisagez de placer un élément supplémentaire sur le entrée désactivée. En interceptant l'événement de clic sur cet élément de superposition, vous pouvez simuler efficacement le comportement souhaité. Voici comment cela fonctionne :

<div>

$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});

Cette solution crée un div de superposition qui couvre l'entrée désactivée. Lorsque l'utilisateur clique sur la superposition, cela déclenche le gestionnaire d'événements de clic, qui désactive ensuite l'entrée et permet l'interaction de l'utilisateur.

Conclusion

Bien que les éléments d'entrée soient désactivés de manière native manque de gestion standard des événements, en plaçant un élément de superposition et en capturant l'événement de clic dessus, vous pouvez implémenter une compatibilité totale entre navigateurs. Cette approche permet aux éléments d'entrée désactivés de se comporter comme prévu, préservant ainsi la fonctionnalité sans compromettre les performances.

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!