Отображение текста-заполнителя для поля пароля в IE

Ответ 1

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

function FauxPlaceholder() {
        if(!ElementSupportAttribute('input','placeholder')) {
            $("input[placeholder]").each(function() {
                var $input = $(this);
                $input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />');
                var $faux = $('#'+$input.attr('id')+'-faux');

                $faux.show().attr('class', $input.attr('class')).attr('style', $input.attr('style'));
                $input.hide();

                $faux.focus(function() {
                    $faux.hide();
                    $input.show().focus();
                });

                $input.blur(function() {
                    if($input.val() === '') {
                        $input.hide();
                        $faux.show();
                    }
                });
            });
        }
    }
    function ElementSupportAttribute(elm, attr) {
        var test = document.createElement(elm);
        return attr in test;
    }

Ответ 2

Не могли бы вы поменять исходное текстовое поле на поле пароля?

$('#pass').focus(
    function(){
        var pass = $('<input id="pass" type="password">');
        $(this).replaceWith(pass);
        pass.focus();
    }
);

<input id="pass" type="text" value="Passowrd">

http://jsfiddle.net/UrNFV/

Ответ 3

Я столкнулся с этой проблемой с IE раньше. Вот мое решение:)

http://jsfiddle.net/mNchn/

Ответ 4

Если я понимаю это право, вы хотите, чтобы в поле говорилось "Пароль", когда в него ничего не было введено; однако "Пароль" отображается как "********".

Порядочное исправление к этому (что также изящно ухудшается, в зависимости от того, как вы его кодируете):

• Поместите ЛАБОРАТОР перед паролем INPUT. Установите текст LABEL в "Пароль" и установите для атрибута for значение INPUT ID, чтобы INPUT сфокусировался при нажатии кнопки LABEL.
• Используйте CSS, чтобы расположить LABEL поверх INPUT, чтобы они перекрывались, и похоже, что "Пароль" находится внутри INPUT.
• Сделайте так, чтобы LABEL была видна только тогда, когда к ней применяется некоторый CSS-класс (.showMe, например).
• Используйте JavaScript, чтобы скрыть LABEL
  • ... если значение INPUT является пустой строкой
  • ... или пользователь выбрал (сфокусировал) INPUT.

Ответ 5

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

input {
    background: url(_img/placeholder.png) 50% 5px no-repeat;
    .
    .
    .
}
input:focus {
    background: none;
}

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

Ответ 6

Здесь мой плагин:

if(jQuery.support.placeholder==false){
    // No default treatment
    $('[placeholder]').focus(function(){
        if($(this).val()==$(this).attr('placeholder'))
            $(this).val('');
        if($(this).data('type')=='password')
            $(this).get(0).type='password';
    });
    $('[placeholder]').blur(function(){
        if($(this).val()==''){
            if($(this).attr('type')=='password'){
                $(this).data('type','password').get(0).type='text';
            }
            $(this).val($(this).attr('placeholder'));
        }
    }).blur();
}

Ответ 7

У меня была такая же проблема, поэтому я написал небольшой плагин

$.fn.passLabel = function(){
var 
T = $(this),
P = T.find('input[type=password]'),
V = pass.val();

P.attr('type','text');
P.focus(function(){ 
if(V == "")
P.attr('type','password');
});
}

теперь вы просто вызываете его для from from, он найдет все поля ввода с паролем атрибут.

например.

$('form').passLabel();

Ответ 8

Немного поздно, но здесь же, я тоже работал над проблемой. IE9 не показывает пароль-заполнитель как текст, почти во всех ответах в Интернете некоторые предлагают изменить тип какой-то, но если у вас это будет, у вас будет другая проблема на странице входа в систему, например, когда вы увидите двойное нажатие на поле пароля, поскольку его тип изменен на текст с паролем, а btw работает с поддержкой. например prop ( "тип", "пароль" ), если вы хотите изменить тип элемента.

с другой стороны, я думаю, что большинство ответов исходит из одного решения, такого как фокус и размытие действий элементов. но когда вы примените этот плагин, будут также выполняться другие текстовые поля, нет конкретного или я могу сказать, что это обобщенное решение, у меня все еще есть незначительная проблема на странице входа с полем пароля, но он правильно показывает текст. так или иначе. вот как я сконфигурировал, скопировал, изменил и/или другие унаследованные анонсы здесь.

(function($) {
    $.fn.placeholder = function() {
        $('input[placeholder], textarea[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() === input.attr('placeholder')) {
                if (input.prop("id") === "password") {
                    input.prop("type", "password");
                }
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() === '' || input.val() === input.attr('placeholder')) {
                input.addClass('placeholder');
                if (input.prop("type") === "password") {
                    input.prop("type", "text");
                }
                input.val(input.attr('placeholder'));
            }
        }).blur().parents('form').submit(function() {
            $(this).find('input[placeholder], textarea[placeholder]').each(function() {
                var input = $(this);
                if (input.val() === input.attr('placeholder')) {
                    input.val('');
                }
            });
        });
    };
})(jQuery);

все еще активный пролем...: D