web-dev-qa-db-fra.com

OnChange sur le bouton radio ne fonctionne pas correctement dans IE8

Je suis obligé de travailler avec IE8 (8.0.7601.17514) et j'ai cette page simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<form action=".">
    <input type="radio" name="rad" value="1" onchange="alert(1);"/>
    <input type="radio" name="rad" value="0" onchange="alert(0);" checked="checked"/>
</form>
<a href="http://google.com">some dummy link</a>
</body>
</html>

Ce que j'attends, c'est que, comme le second bouton radio est sélectionné, cliquez sur la première sur la première pour élever immédiatement une alerte. Cela fonctionne bien en FF.

Ce qui arrive réellement, c'est que lorsque je clique sur la première radio, rien ne se passe. Ensuite, lorsque l'élément est floueux (par exemple, je clique quelque part ailleurs, l'autre radio, une liaison dans la page, etc.), alors l'alerte est levée.

Y a-t-il une solution de contournement à cela?

Edit:

apparemment, ce comportement est exactement selon W3C Spec

Modifier

L'événement de changement se produit lorsqu'un contrôle perd la mise au point d'entrée et sa valeur a été modifiée depuis la mise au point. Cet événement est valide pour l'entrée, la sélection et la Texarea. élément.

(Merci à @ Mu-est-trop court).

La solution de contournement est d'ajouter un flou oncelick + Focus:

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>
javascripthtmlinternet-explorerradio-button
23
Ondrej Skalicka

Dans Internet Explorer (au moins au moins IE8), un bouton radio ou une case à cocher pour modifier sa valeur ne déclenche pas réellement l'événement OnChange tant que l'entrée perd la mise au point.

Ainsi, vous devez en quelque sorte déclencher l'événement de flou vous-même. Un suggestionnaire serait d'avoir une fonction: comme suit:

function radioClick()
{
 this.blur();  
 this.focus();  
}


<input type="radio" name="rad" value="1" onclick="radioClick" onchange="alert(1);"/>

Maintenant, votre événement onchange doit être déclenché mais comme vous pouvez le constater, c'est un code redondant, vous êtes donc mieux à l'aide du gestionnaire d'événements onclick.

La meilleure solution consiste à utiliser une bibliothèque JavaScript moderne comme JQuery qui gère toutes ces bizarreries ..

29
Baz1nga

Techniquement, IE réellement obtenu ce droit. De la Fine Spécification :

Modifier

L'événement de changement se produit lorsqu'un contrôle perd la mise au point d'entrée et sa valeur a été modifiée depuis la mise au point. Cet événement est valide pour l'entrée, la sélection et la Texarea. élément.

Ainsi, pour qu'un événement de changement soit déclencheur, la spécification indique que l'élément doit perdre la mise au point (c'est-à-dire un flou nécessaire). Le krudge habituel consiste à utiliser un gestionnaire de clic ou à forcer le flou lorsque les autres ont suggéré.

8
mu is too short

utilisez ONCLICK, mais c'est-à-dire appeler le gestionnaire d'événements avant que la valeur (ou l'attribut coché) ait été modifié MSDN

2
sarkiroka