Question

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!

EDIT Already tried suggestions of

tgrafico.className = MAYUSCULA_ACTIVADO ? "teclado_grafico mayuscula" : "teclado_grafico minuscula";

but no joy yet. Opening IE8 dev’s tools allows one to see in the HTML tab that the class is changing correctly between the expected values, but the browser just does not behave!

Answer 1

I would try to use jquery and basically have all the keys lowercased and have css class

.Upper {text-decoration:uppercase; }

than the following code should work

$('.shift').click(function(){ 
    $('.key').toggleClass('Upper');
});

Actually i have almost the same stuff, but not with text decoration property, and IE8 do update appearance of DOM elements on toggleClass
Probably otherwise you should look what jQuery do on toggleClass in order to make it cross browser