IE8 v8 не меняет класс для элемента DOM, несмотря на то, что функция JS изменяет атрибут элемента - PullRequest
Новая
       10

IE8 v8 не меняет класс для элемента DOM, несмотря на то, что функция JS изменяет атрибут элемента

0 голосов
/ 27 марта 2010

У меня есть экранная клавиатура для более безопасного ввода паролей.

Сама клавиатура расположена так: 

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

И у него есть «кнопка Shift», которая запускает функцию JS с этим (я уже все это пробовал): 

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

Связанный CSS выглядит так: 

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

Он работает на каждом браузере, который я пробовал. IE 6, 7; Опера 10; GChrome; FF 3, 3,5 и 3,6; Safari 4, ... но в IE8 v8 (строгий режим) класс не изменился! Я имею в виду, debuggin 'с инструментами IE8 позволяет увидеть, что атрибут className есть и он меняется ... но пользователь не видит, как буквы меняются с прописных на строчные и снова на прописные.

Я просто не знаю, как с этим справиться ... У меня были жалобы на клиента, использующего IE6 ... теперь они обновили свои материалы, и это появляется. Любая помощь будет очень полезна!

РЕДАКТИРОВАТЬ Уже пробовал предложения 

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

но радости пока нет. Открытие инструментов IE8 dev позволяет увидеть на вкладке HTML, что класс корректно изменяется между ожидаемыми значениями, но браузер просто не ведет себя!

Ответы [ 3 ]

2 голосов
/ 27 марта 2010

Не подходите близко к атрибутам для этого, поскольку поведение IE с атрибутами несовместимо с другими браузерами и в разных режимах, и вам не нужно иметь с ними дело. Вместо этого просто используйте свойство className элемента: 

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

UPDATE

Это похоже на ошибку в IE 8. Подход определенно правильный, и класс переключается: вы можете доказать это, изменив соответствующий CSS и наблюдая за изменением цвета текста, когда нажимаете кнопку Shift: 

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

Кроме того, свойство currentStyle.textTransform каждого элемента <a> устанавливается правильно, как вы можете доказать, используя следующее: 

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

Итак, мы заключаем, что это ошибка рендеринга в IE 8. Я нашел обходной путь, который не должен применяться text-transform к состоянию по умолчанию, то есть к верхнему регистру. Поэтому, используя мой код переключения классов и изменив свой CSS на 

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

... это исправит.

1 голос
/ 05 апреля 2010

Я бы попробовал использовать jquery и, в основном, иметь все ключи в нижнем регистре и иметь класс css 

.Upper {text-decoration:uppercase; }

, чем должен работать следующий код 

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

На самом деле у меня есть почти тот же материал, но не со свойством оформления текста, и IE8 do обновляет внешний вид элементов DOM в toggleClass Вероятно, в противном случае вы должны посмотреть, что делает jQuery на toggleClass, чтобы сделать его кроссбраузерным

0 голосов
/ 22 мая 2010

У меня такая ситуация с IE8. Мое решение:

tgrafico.className = "teclado_grafico mayuscula";

НЕ через setAttribute ('className' ...

Я не знаю, почему это так.

P.S. Извините, мой английский ...:)

...