IE8 v8 not changing class for a DOM element despite JS function changing the element attribute
- by Alfabravo
I have an on-screen keyboard in order to provide a safer input for passwords.
The keyboard itself is placed like this:
<div class="teclado_grafico" id="teclado_grafico">
<a class="tecla_teclado" onmousedown="teclaAction( this, 'caja_selector'); return false" style="top: 0px; left: 0px;">Q</a>
<a class="tecla_teclado" onmousedown="teclaAction( this, 'caja_selector'); return false" style="top: 0px; left: 28px;">W</a>
.
.
.
</div>
And it has a "Shift button" which fires a JS function with this (I've already tried all that, indeed):
if (obj.innerHTML == "Mayus.") {
try {
MAYUSCULA_ACTIVADO = !MAYUSCULA_ACTIVADO;
var tgrafico = document.getElementById("teclado_grafico");
if(MAYUSCULA_ACTIVADO) {
// tgrafico.className = "teclado_grafico mayuscula";
// $("#teclado_grafico").removeClass('minuscula').addClass('mayuscula');
// $("#teclado_grafico").attr('class', 'teclado_grafico mayuscula');
// $("#teclado_grafico").attr('className', 'teclado_grafico mayuscula');
tgrafico.setAttribute('className', "teclado_grafico mayuscula") ||
tgrafico.setAttribute('class', "teclado_grafico mayuscula");
} else {
// tgrafico.className = "teclado_grafico minuscula";
// $("#teclado_grafico").removeClass('mayuscula').addClass('minuscula');
// $("#teclado_grafico").attr('class', 'teclado_grafico minuscula');
// $("#teclado_grafico").attr('className', 'teclado_grafico minuscula');
tgrafico.setAttribute('className', "teclado_grafico minuscula") ||
tgrafico.setAttribute('class', "teclado_grafico minuscula");
}
} catch (_E) {
//void
}
return;
}
The associated CSS is like this:
.mayuscula a.tecla_teclado{
text-transform: uppercase;
}
.minuscula a.tecla_teclado{
text-transform: lowercase;
}
It works on every single browser I've tried. IE 6, 7; Opera 10; GChrome; FF 3, 3.5 and 3.6; Safari 4,... but in IE8 v8 (strict mode) the class is not changed! I mean, debuggin' with the IE8 tools allows one to see that the attribute className is there and it changes... but the user does not see the letters changing from uppercase to lowercase, to uppercase again.
I just don't know how to handle this... I had complains about the client using IE6... now they updated their stuff and this shows up. Any help will be reaaaaly helpful!
