IE заставляет встроенные стили переопределить мою магию Jquery?

Question

Хорошо, поэтому у меня есть небольшая аккуратная форма входа на моем сайте, и я люблю заполнители вместо ярлыков!Как вы все знаете, Microsoft, даже знающая, что она обладает огромными ресурсами, отказывается выпускать полностью совместимый с CSS3 браузер HTML5.Они даже настолько жадны, что не позволяют старым пользователям обновиться до 9, если у них нет Windows Vista / 7 --- end IE rant

Так что я использую фальшивый парольПолевой трюк я читал здесь в другом посте, но у меня возникла проблема!Когда я пытаюсь заставить поле fakepassword появляться и скрывать пароль, создается впечатление, что IE навязывает элементу какой-то фиктивный встроенный стиль и не позволяет ему скрыться!

Вот код:

//This function hides our fake password field and changes focus to the real one. Yet another IE workaround...
$("#fakepassword").focus(function(){
    $('#fakepassword').hide();
    $('#password').show();
    $('#password').focus();
});
//These functions perform the link hover copycat
$("#titleHover").mouseenter(function(){
    $("#titleLarge").css('background-color', '#555');
});
$("#titleHover").mouseout(function(){
    $("#titleLarge").css('background-color', 'transparent');
});
$("#titleHover").click(function(){
    $("#userMenu").animate({
        height: "192px",
    }, 250, function() {
        // Animation complete. Display form and swap out arrow.
        $('#loginForm').css('visibility', 'visible');
        $("#titleLarge").css('background-color', 'transparent');
        $("#titleHover").unbind('mouseenter').unbind('mouseout');
        //Use my sweep function to swap in values for IE
        $('html').click(function() {
            //Hide the login, animate menu up and swap back in down arrow.
            $('#loginForm').css('visibility', 'hidden');
            $("#userMenu").animate({
                height: "64px",
            }, 250, function() { 
                $("#titleHover").mouseenter(function(){
                    $("#titleLarge").css('background-color', '#333');
                });
                $("#titleHover").mouseout(function(){
                    $("#titleLarge").css('background-color', 'transparent');
                });
            });
            if ($('#password').attr('value') == '') {
                $('#password').hide();
                $('#fakepassword').show();
            }                       
        });                     
        $('#userWrap').click(function(event){
            event.stopPropagation();
        })
    });
});

И изображение отладки IE:

Что, черт возьми, это ^^^

Answer 1

Вы можете использовать jQuery для очистки встроенного стиля.Это большой молот, может быть, слишком большой для этого случая.

$('.myDiv').attr('style','')

Answer 2

Ну, после того, как я сегодня много потренировался с Jquery, я исправил свою проблему, добавив немного больше логики в скрипт.Проблема, с которой я столкнулся, была связана с тем, как работает мой скрипт, который подделывает замену IE.Он присваивает тексту-заполнителю значение и меняет цвет.Добавив ту же логику к тому, как фальшивый вход включается и выключается, я смог решить проблему.В будущем, я думаю, я просто собираюсь использовать заполнители для текста!Простая логика: если пользователь еще ничего не выделил или не набрал, заполнитель виден.Должно работать в любом браузере!Это функции отображения / скрытия:

$("#fakepassword").focus(function(){
    $('#fakepassword').hide();
    $('#password').show();
    $('#password').focus();
});
$("#password").focusout(function(){
    if ($('#password').attr('value') == $('#password').attr('placeholder')) {
        $('#password').hide();
        $('#fakepassword').show();
    }
});