Compatibilidad de removeAttribute() en IE8. Que opinan?

af1 · #1 (**permalink**) 13/11/2012, 10:55

Hola. Tengo el siguiente problema.

Estoy utilizando la función javascript removeAttribute() para quitar la propiedad readonly de unos input type='text'.

Básicamente removeAttribute('readonly'); mediante un ciclo por cada elemento.

Esto funciona bien en varios navegadores (FireFox, Opera, inclusive hasta en IE9), pero no esta funcionando para IE8.

Haciendo pruebas con el navegador IE8, ví que el ciclo con el cual recorro los elementos está funcionando bien, puedo obtener sus referencias. Pero el problema está cuando los quiero habilitar con la instrucción: "removeAttribute('readonly');" .

Alguna sugerencia?

Gracias.

MarioAraque · #2 (**permalink**) 13/11/2012, 11:46

Esto quizas te puede servir: http://msdn.microsoft.com/en-us/libr...(v=vs.85).aspx

Saludos.

furoya · #3 (**permalink**) 13/11/2012, 13:31

No tengo un IE8 para probar, pero debería funcionar.
Lástima que aquí tienen la maldita costumbre de venir a plantear "bugs" sin un ejemplo para saber si es un error del navegador o del programador.

En IE6 seguro anda. Pero lo que no entiendo es por qué "removés el atributo" ¿hay algún motivo para hacerlo así?. Yo lo vi hace poco en un ejemplo, pero puesto por alguien que no tenía la menor idea de JS. Y era evidente.

Probá estos dos, y contanos qué diferencia tienen con tu código.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
onload = function(){ 
document.getElementById("alfa").removeAttribute('readonly', false);
//document.getElementById("alfa").readOnly = false; 
}
</script>
</head>
<body>
<input readonly id=alfa value="QWERTY">
</body>
</html>

Edición: perdón, estoy releyendo el tema, y doy por seguro que hay un error en

Cita:

Pero el problema está cuando los quiero habilitar con la instrucción: "removeAttribute('readonly');" .

Obviamente quisiste decir "deshabilitar"; yo lo leí así, porque de otra forma habría que banearte...

zerokilled · #4 (**permalink**) 13/11/2012, 14:15

buenas,
en iexplorer funciona removeAttribute al igual que otros métodos parecidos del DOM. el caso de iexplorer con estos métodos es que el atributo es case-sensitive y debe indicarse tal como se escribiría en forma de propiedad. es decir, el atributo readonly en javascript se escribe como readOnly. entonces, para iexplorer se debe escribir como removeAttribute("readOnly").

furoya · #5 (**permalink**) 13/11/2012, 16:38

Es que justamente para eso está el false, para quitar el "case-sensitive". Así funciona en todos.
O debería, vamos a esperar la confirmación.

zerokilled · #6 (**permalink**) 13/11/2012, 17:25

@furoya, esa implementación será propia de algún navegador. según la documentación de la api en w3.org, en ninguna de las versiones existe un segundo parámetro:
dom level 3, dom level 2, dom level 1.

caricatos · #7 (**permalink**) 13/11/2012, 17:41

Hola:

En todos los navegadores y sus diferentes versiones se asigna false al atributo y se vuelve a activar... de todos modos, con los controles de los formularios es preferible no tocar mucho los atributos porque pueden dar problemas... por razones de seguridad tal vez.

Saludos

emprear · #8 (**permalink**) 13/11/2012, 18:32

removeAttribute() solo trabaja en IE(7/8/9), y solo sirve para remover atributos inherentes al estilo del objeto, por ejemplo

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<script type="text/javascript">
function RemoverBg_1(boton) {
boton.style.removeAttribute ("backgroundColor");
}
function RemoverBg_2(boton) {
boton.style.removeAttribute ("backgroundcolor",0);
}
function RemoverBg_3(boton) {
boton.style.removeAttribute ("backgroundcolor");
}
</script>
</head>
<body>
<p>
<button onclick="RemoverBg_1(this);" style="background-color:lime;">Quitar color de fondo</button>
</p>
<p>
<button onclick="RemoverBg_2(this);" style="background-color:red;">Quitar color de fondo</button>
</p>
<p>
<button onclick="RemoverBg_3(this);" style="background-color:green;">Quitar color de fondo 3 (no funcionará)</button>
</p>
</body>
</html>

El 2º parámetro al que hace referencia @furoya, con valor 0 hace "noCase" la referencia a la propiedad.
el equivalente para navegadores NO IE es removeProperty()

Para quitar el readonly
elemento.readOnly = false;

Saludos

furoya · #9 (**permalink**) 13/11/2012, 20:06

Al final me hicieron dudar.
Sí, por supuesto, lo de poner elemento.readOnly = false; es evidente, así se debería hacer en vez de borrar y reescribir el atributo con sus valores. Y no quiero ser mal pensado, pero temo saber de donde viene eso. Por eso lo dejé aclarado en mi ejemplo.

Con respecto a lo otro; funciona en todos, pero no en todos los casos.

Dejo la versión "final", que me falta probar en IE, pero supongo que si son los inventores del engendro, lo tienen que aceptar en todas las versiones.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript">
function bravo(){ 
document.getElementById("alfa").removeAttribute('readonly', false);
//document.getElementById("alfa").readOnly = false; 
}

function charly(){ 
document.getElementById("alfa").setAttribute('readonly', 'readonly', false);
//document.getElementById("alfa").readOnly = true; 
}
</script>
</head>
<body>
<input readonly id=alfa value="QWERTY">
<input type=button onclick=bravo() value="sin readonly">
<input type=button onclick=charly() value="con readonly">
</body>
</html>

emprear · #10 (**permalink**) 13/11/2012, 20:18

Probada y funcionando en IE 7/8/9