Solution élegante pour le probleme du OnClick OnChange sur une checkbox
Lorsque vous souhaitez faire évoluer le contenu de votre page Web lorsque qu'un utilisateur clic sur une case à cocher, On est rapidement confronté au problème du OnChange qui agit différemment en fonction des navigateurs.
Mais lequel des navigateurs a raison d’après les standards ?
D’après mes recherche, il semblerait que les standards ne soit pas assez précis sur un point : La définition exacte de la perte du focus.
Si vous consultez les standards sur l’évènement onchange http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.2.3, vous verrez qu'il y est clairement explicité que le onchange doit être appelé lorsque le contrôle perd le focus et que la valeur a changé depuis qu'il a reçu le focus.
Il est explicité ici quand est ce qu'un contrôle reçoit le focus : http://www.w3.org/TR/html401/interact/forms.html#h-17.11, mais il ne permet de déterminer précisément à quel moment un contrôle perd le focus.
La solution la plus simple pour remédier à ce problème est de ne pas utiliser le onchange sur une checkbox, mais le onclick.
Toutefois, cette solution ne fonctionne pas dans tous les cas. En particulier lorsque la méthode appelée en javascript est complexe et appelle des fonctions d'annulation d’évènements. Dans ce dernier cas, l'action est réalisée, mais la case à cocher ne se décoche par sur Internet Explorer.
Alors une idée m'est venue, puisque le problème sous-jacent est un problème de moment ou le contrôle perd le focus, pourquoi ne pas nous même décider du moment ou le focus est perdu ?
exemple :
<input type="checkbox" onclick="$(this).blur();" onchange="alert('modifié');">
<hr />
<input type="checkbox" onclick="$(this).blur();" onchange="alert('modifié');" />
(utilise le framework jQuery pour l'appel du blur).
Cette exemple fonctionne de la même façon sur tous les Navigateurs et si vous devez appeler des fonctions d'annulations d’évènements dans le onchange, on pourra toujours cocher et décocher la case sous Internet Explorer.
Exemple concret du problème sous Internet Explorer : http://webbugtrack.blogspot.com/2007/11/bug-193-onchange-does-not-fire-properly.html