Код-заполнитель, используемый для IE8, вызывающий поле входа в раскрывающееся меню, чтобы потерять фокус

Я использую следующий код-заполнитель для IE8, однако примерно в 70% случаев, когда вы перемещаете мышь в поле входа в раскрывающийся список, он теряет фокус (все поле ввода выпадающего списка исчезает); через отладку - когда я удаляю этот код, проблема уходит - я нашел причину проблемы в этом коде:

Изменить: Я обнаружил, что это не вызвано каким-либо конкретным кодом-заполнителем, но это вызвано некоторой частью процесса, поскольку я попытался использовать 3 отдельных плагина-заполнителя, и это происходит на всех 3 из них; уберите их и никаких проблем.

$(document).ready(function() {

    if ( !("placeholder" in document.createElement("input")) ) {
        $("input[placeholder], textarea[placeholder]").each(function() {
            var val = $(this).attr("placeholder");
            if ( this.value == "" ) {
                this.value = val;
            }
            $(this).focus(function() {
                if ( this.value == val ) {
                    this.value = "";
                }
            }).blur(function() {
                if ( $.trim(this.value) == "" ) {
                    this.value = val;
                }
            })
        });

        // Clear default placeholder values on form submit
        $('form').submit(function() {
            $(this).find("input[placeholder], textarea[placeholder]").each(function() {
                if ( this.value == $(this).attr("placeholder") ) {
                    this.value = "";
                }
            });
        });
    }

});

Здесь вы можете посмотреть пример: http://condorstudios.com/stuff/temp/so/header-sample.php

Изменить: Не уверен, что это поможет, поскольку jsfiddle не работает в IE8, и я не могу проверить, плохо ли работает скрипка в IE8, но вот скрипка: http://jsfiddle.net/m8arw/7/

Любой способ исправить это?

Ответы

Ответ 1

Вы пытались переключить свое событие, чтобы показать/скрыть раскрывающийся список до "mouseenter" и "mouseleave"?
Это гораздо более надежный вариант для старого IE, чем событие "focus" и "blur". Кроме того, привязка события непосредственно к "выпадающему" div более предпочтительно, чем к элементу "input".

Короче говоря, попробуйте изменить эту часть своего кода следующим образом.

$(function() {
    var dropdown = $('div.login div.dropdown')
        .on('mouseenter', function() {
            dropdown.css('display', 'block');
        })
        .on('mouseleave', function() {
            dropdown.removeAttr('style');
        });
});

Ответ 3

Я использую этот код для реализации placeholder во всех браузерах (он использует Modernizr для его обнаружения):

Демо: http://jsfiddle.net/S3zQ9/

var placeholder_OnBlur = function () {
    var input = $(this);

    if (input.val() == '' || input.val() == input.attr('placeholder')) {
        input.addClass('placeholder');
        input.val(input.attr('placeholder'));
    }
};

var placeholder_OnFocus = function () {
    var input = $(this);

    if (input.val() == input.attr('placeholder')) {
        input.val('');
        input.removeClass('placeholder');
    }
};

var placeholder_OnSubmit = function () {
    $(this).find('[placeholder]').each(function () {
        var input = $(this);

        if (input.val() == input.attr('placeholder')) {
            input.val('');
        }
    });
};

var placeholder_OnLoad = function () {
    if (!!$(this).attr('placeholder')) {
        $(this).on('focus', placeholder_OnFocus);
        $(this).on('blur', placeholder_OnBlur);
        $(this).parents('form').on('submit', placeholder_OnSubmit);
        $(this).blur();
    }
};

 if (!Modernizr.input.placeholder) {
     $('[placeholder]').each(placeholder_OnLoad);
 }

Не тестируйте IE8, но он должен работать.