IE8 v8 ne change pas de classe pour un élément DOM en dépit de la fonction JS modifiant l'attribut élément

J'ai un clavier à l'écran afin de fournir une entrée plus sûre pour les mots de passe.

Le clavier lui-même est placé comme ceci:

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

Et il a un "bouton Shift" qui déclenche une fonction JS avec ceci (j'ai déjà essayé tout cela):

 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; }

Le CSS associé est comme ceci:

 .mayuscula a.tecla_teclado{ text-transform: uppercase; } .minuscula a.tecla_teclado{ text-transform: lowercase; }

Il fonctionne sur chaque navigateur que j'ai essayé. IE 6, 7; Opéra 10; GChrome; FF 3, 3,5 et 3,6; Safari 4, … mais dans IE8 v8 (mode strict), la classe n'est pas modifiée! Je veux dire, débuggin 'avec les outils IE8 permet de voir que l'attribut className est là et ça change … mais l'utilisateur ne voit pas les lettres passer des majuscules aux minuscules, aux majuscules à nouveau.

Je ne sais juste pas comment gérer cela … J'ai eu des plaintes au sujet du client en utilisant IE6 … maintenant ils ont mis à jour leurs affaires et cela apparaît. Toute aide sera utile!

EDIT Déjà essayé des suggestions de

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

Mais pas encore de joie. L'ouverture des outils de développement d'IE8 permet de voir dans l'onglet HTML que la classe change correctement entre les valeurs attendues, mais le navigateur ne se comporte pas!

J'essaierais d'utiliser jquery et j'ai fondamentalement toutes les clés en minuscule et j'ai une classe css

 .Upper {text-decoration:uppercase; }

Que le code suivant devrait fonctionner

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

En fait, j'ai presque les mêmes choses, mais pas avec la propriété de décoration de texte, et IE8 fait apparaître l'apparence des éléments DOM sur toggleClass Probablement, sinon, vous devriez regarder ce que jQuery fait sur toggleClass afin de le faire naviguer dans le navigateur

Ne passez pas à proximité des attributs pour cela, car le comportement d'IE avec des attributs est incompatible avec d'autres navigateurs et à travers les modes et vous n'avez pas besoin de les traiter. Au lieu de cela, utilisez la propriété className l'élément:

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

METTRE À JOUR

Cela semble être un bug dans IE 8. L'approche est certainement correcte, et la classe est commutée: vous pouvez prouver cela en modifiant le CSS approprié et en observant que la couleur du texte change correctement lorsque vous cliquez sur le bouton Maj.

 .mayuscula a.tecla_teclado{ text-transform: uppercase; color: green; } .minuscula a.tecla_teclado{ text-transform: lowercase; color: blue; }

En outre, la propriété currentStyle.textTransform de chaque élément <a> est configurée correctement, car vous pouvez prouver l'utilisation de ce qui suit:

 <a class="tecla_teclado" onclick="alert(this.currentStyle.textTransform);">Q</a>

Nous concluons donc qu'il s'agit d'un bug de rendu dans IE 8. J'ai trouvé une solution de contournement, qui ne consiste pas à appliquer la text-transform sur l'état par défaut, ce qui est en majuscules. Donc, j'utilise mon code de changement de classe et change mon CSS pour

 .mayuscula a.tecla_teclado{ } .minuscula a.tecla_teclado{ text-transform: lowercase; }

… va le réparer.

J'ai cette situation avec IE8. Ma solution est:

Tgrafico.className = "teclado_grafico mayuscula";

PAS à travers setAttribute ('className' …

Je ne sais pas pourquoi c'est cela.

PS Désolé mon anglais … 🙂