Maison > interface Web > js tutoriel > Comment puis-je gérer les événements de clic sur les champs de saisie désactivés dans les navigateurs ?

Comment puis-je gérer les événements de clic sur les champs de saisie désactivés dans les navigateurs ?

Mary-Kate Olsen
Libérer: 2024-12-19 14:14:09
original
582 Les gens l'ont consulté

How Can I Handle Click Events on Disabled Input Fields Across Browsers?

Gestion des événements de clic sur une entrée désactivée

Dans un document HTML, un champ de saisie désactivé ne répond à aucun événement de souris. Bien qu'il soit possible de propager des événements depuis l'entrée désactivée vers les éléments parents dans certains navigateurs, Firefox ne prend pas en charge ce comportement. Par conséquent, une solution de contournement est nécessaire pour activer la gestion des événements sur les entrées désactivées sur plusieurs navigateurs.

Une solution consiste à placer un élément div transparent sur l'entrée désactivée. Ce div capturera l'événement de clic et déclenchera une action, telle que la suppression de l'attribut désactivé de l'entrée et la définition du focus.

Exemple HTML :

<div>
Copier après la connexion

jQuery :

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

Ce script masquera l'élément div après un clic et activera l'entrée désactivée. L'entrée recevra également le focus, permettant à l'utilisateur d'interagir avec elle immédiatement.

Exemple de travail :

http://jsfiddle.net/RXqAm/170/

En implémentant cette solution de contournement, les développeurs peuvent garantir que les champs de saisie désactivés peuvent toujours recevoir des événements de clic et déclencher les actions souhaitées dans tous les principaux 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