Comment puis-je déclencher des événements sur des éléments d'entrée désactivés dans des navigateurs comme Firefox ?

Solution de contournement pour les événements sur les éléments d'entrée désactivés

Les éléments d'entrée désactivés ne déclenchent généralement pas d'événements de souris. Alors que la plupart des navigateurs propagent les événements des éléments désactivés vers leurs conteneurs parents, Firefox ne prend pas en charge ce comportement. Cela peut poser des défis pour certains scénarios.

Problème :

Vous devez gérer les événements sur les éléments d'entrée désactivés, mais le comportement par défaut l'empêche.

Solution :

Pour surmonter ce problème, une technique peut être utilisée pour intercepter les événements d'un élément d'entrée désactivé et déclencher un clic sur un élément adjacent qui n'est pas désactivé.

Voici un exemple d'implémentation utilisant HTML et jQuery :

<div>
<pre class="brush:php;toolbar:false">$("div > div").click(function (evt) {
    $(this).hide().prev("input[disabled]").prop("disabled", false).focus();
});

Dans cet exemple, l'élément div chevauche l'entrée désactivée élément. Lorsque l'on clique sur le div, il déclenche un clic sur l'élément d'entrée, qui à son tour active l'élément d'entrée et définit le focus sur lui.

Exemple :

Visitez le exemple suivant JSFiddle pour voir cette technique dans action :

https://jsfiddle.net/RXqAm/170/