2012-05-14 13 views
23

estoy obligado a trabajar con Internet Explorer 8 (8.0.7601.17514) y tengo esta sencilla página:onchange en botón de radio no funciona correctamente en 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> 

Lo que espero es que a medida que se selecciona el segundo botón , al hacer clic en el primero, se generará una Alerta de inmediato. Esto funciona bien en FF.

Lo que realmente sucede es que cuando hago clic en la primera radio, no pasa nada. Luego, cuando el elemento está borroso (por ejemplo, hago clic en otro lugar, la otra radio, algún enlace en la página, etc.), ENTONCES se levanta la alerta.

¿Hay alguna solución a esto?

EDIT:

parecer, este comportamiento es exactamente de acuerdo con W3C spec

cambio

El evento de cambio se produce cuando un control pierde el foco de entrada y su valor se ha modificado desde que ganas el foco Este evento es válido para INPUT, SELECT y TEXTAREA. elemento.

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

La solución a esto es añadir un desenfoque onclick + foco:

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


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

trabajando bien para mí en IE8 - http://jsfiddle.net/uMD9h/ – Pranav

+0

@Pranav no, intenté el enlace que enviaste en ie8 y no funcionará –

+0

extraño ... está funcionando absolutamente bien para mí en IE8 con Windows XP. – Pranav

Respuesta

29

En Internet Explorer (hasta al menos IE8) al hacer clic en un botón de opción o casilla de verificación para cambiar su valor, en realidad no activa el evento onChange hasta que la entrada pierda el foco.

lo tanto es necesario desencadenar alguna manera el evento desenfoque mismo .. uno suggestiong sería tener una función: de la siguiente manera:

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


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

Ahora su evento onchange se debe disparar pero como se puede ver que es redundante Por lo tanto, es mejor utilizar el controlador de eventos onclick.

La mejor solución es utilizar un moderno biblioteca de Javascript como jQuery que se ocupa de todas estas peculiaridades para usted ..

+0

, creo que onchange está diseñado para eso ... hasta que el control no pierda el foco significa que la modificación continúa ... – Pranav

+1

estuvo de acuerdo ... Tuve que responder a la pregunta. – Baz1nga

+0

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

2

uso onclick, pero es decir, es llamar al controlador de eventos antes de que el valor (o atributo seleccionado) fue cambiado msdn

+0

¿por qué hacer clic? onchange es apropiado para esto. – Pranav

+1

porque cambiar solo disparar cuando el elemento perdió el foco en, por ejemplo, – sarkiroka

8

Técnicamente, IE realidad tiene este derecho. Desde el fine specification:

cambio

El evento de cambio se produce cuando un control pierde el foco de entrada y su valor se ha modificado desde que obtuvo el foco. Este evento es válido para INPUT, SELECT y TEXTAREA. elemento.

Por lo tanto, para que se active un evento de cambio, la especificación dice que el elemento debe perder el foco (es decir, se requiere una falta de definición).El kludge habitual es utilizar un manejador de clics o forzar el desenfoque como los otros han sugerido.

+0

+1. completamente de acuerdo contigo – Pranav