2012-05-14 22 views
23

sono costretto a lavorare con IE8 (8.0.7601.17514) e ho questo semplice pagina:onchange sul pulsante radio non funziona correttamente in IE8

<!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> 

Quello che mi aspetto è che, come si seleziona il secondo pulsante di opzione , cliccando sul primo si alza immediatamente un avviso. Funziona bene in FF.

In realtà, quando faccio clic sulla prima radio, non succede nulla. Quindi, quando l'elemento è sfocato (ad esempio, clicco da qualche altra parte, l'altra radio, qualche link nella pagina, ecc.), POI l'avviso è alzato.

Esiste una soluzione alternativa?

EDIT:

apparentemente questo comportamento è esattamente secondo W3C spec

cambiamento

L'evento cambiamento si verifica quando un controllo perde il focus e il suo valore è stato modificato da quando si è messo a fuoco. Questo evento è valido per INPUT, SELECT e TEXTAREA. elemento.

(grazie a @ mu-is-too-short).

La soluzione a questo è quello di aggiungere un onclick sfocatura + attenzione:

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


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

funzionante per me in IE8 - http://jsfiddle.net/uMD9h/ – Pranav

+0

@Pranav no, ho provato il link u inviato in ie8 e non funzionerà –

+0

strano ... funziona perfettamente per me in IE8 con finestra XP. – Pranav

risposta

29

In Internet Explorer (almeno fino a IE8), facendo clic su un pulsante di opzione o su una casella di controllo per modificarne il valore, non viene effettivamente attivato l'evento onChange finché l'input non perde il focus.

quindi è necessario per attivare in qualche modo l'evento sfocatura da soli .. uno suggestiong sarebbe quella di avere una funzione: come segue:

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


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

Ora il vostro evento onchange dovrebbe essere attivato, ma come si può vedere è ridondante codice quindi stai meglio usando solo il gestore di eventi onclick.

La soluzione migliore è quella di utilizzare una moderna libreria javascript jQuery come che gestisce tutti questi capricci per voi ..

+0

penso che onchange sia progettato per questo .. fino a quando il controllo non perde il focus significa che la modifica è ancora in corso ... – Pranav

+1

concordato .. Dovevo rispondere alla domanda. – Baz1nga

+0

http://stackoverflow.com/questions/1498987/ie-html-radio-change-event –

2

uso onclick, ma vale a dire è chiamare il gestore di eventi prima che il valore (o attributo checked) è stato cambiato msdn

+0

perchè onclick ?? onchange è appropriato per questo. – Pranav

+1

perché il cambiamento si attiva solo quando l'elemento ha perso il focus in ie – sarkiroka

8

Tecnicamente, IE in realtà ha questo diritto. Dal fine specification:

cambiamento

L'evento cambiamento si verifica quando un controllo perde il focus e il suo valore è stato modificato dopo guadagnando attenzione. Questo evento è valido per INPUT, SELECT e TEXTAREA. elemento.

Quindi, per far scattare un evento di cambiamento, la specifica dice che l'elemento deve perdere la messa a fuoco (cioè è necessaria una sfocatura).Il solito kludge è usare un gestore di clic o forzare la sfocatura come gli altri hanno suggerito.

+0

+1. completamente d'accordo con te. – Pranav