Maison >interface Web >js tutoriel >Comment puis-je capturer des événements sur des champs de saisie désactivés ?

Comment puis-je capturer des événements sur des champs de saisie désactivés ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-16 20:15:16973parcourir

How Can I Capture Events on Disabled Input Fields?

Comment capturer des événements sur des champs de saisie désactivés

Les champs de saisie désactivés ne gèrent généralement pas les écouteurs d'événements. Cela peut être un défi si vous devez activer des fonctionnalités basées sur les interactions des utilisateurs avec de telles entrées.

Solution de contournement :

Pour surmonter ce problème, vous pouvez configurer des gestionnaires d'événements. sur les éléments conteneurs, car les navigateurs propagent souvent les événements provenant d'éléments désactivés dans l'arborescence DOM. Cependant, certains navigateurs, comme Firefox, ne se comportent pas de cette manière.

Solution multi-navigateurs :

Pour une compatibilité complète entre navigateurs, vous pouvez placer un transparent élément, tel qu'un <div>, devant le champ de saisie désactivé. Cet élément capturera l'événement de clic :

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

Avec cette solution de contournement, l'événement de clic sur la superposition transparente activera le champ de saisie désactivé et lui donnera le focus.

Démonstration :

Vous pouvez voir cette solution en action sur : http://jsfiddle.net/RXqAm/170/ (en utilisant jQuery 1.7 avec prop au lieu de attr).

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!

Déclaration:
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