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

Question

Я знаю, что есть множество вопросов-заполнителей, но я пытаюсь усовершенствовать мои.

Мой текущий код прекрасно работает и делает то, что должен. Проблема в том, что когда я иду, чтобы разместить заполнитель «пароль», он помещает заполнитель в маскирующие символы. Любые идеи о том, как обойти это?

    $(function() {
if(!$.support.placeholder) { 
        var active = document.activeElement;
    $(':text').focus(function () {
        if ($(this).attr('placeholder') != '' && $(this).val() ==  $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
        }
    }).blur(function () {
        if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
        }
    });
    $(':text').blur();
    $(active).focus();
    $('form').submit(function () {
        $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
    });

    var active = document.activeElement;
    $(':password').focus(function () {
        if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
            $(this).val('').removeClass('hasPlaceholder');
        }
    }).blur(function () {
        if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
            $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
        }
    });
    $(':password').blur();
    $(active).focus();
    $('form').submit(function () {
        $(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
    });
}
   });

Мое поле для пропуска:

  <div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>

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

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

Answer 3

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

http://jsfiddle.net/mNchn/

Answer 4

Вот мой плагин:

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

Answer 5

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

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

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

Answer 6

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

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

1. Поставьте ЭТИКЕТКУ перед вводом пароля.Установите текст LABEL равным «Password», и установите его атрибут for, чтобы он указывал на идентификатор INPUT, так чтобы INPUT фокусировался при нажатии на LABEL.
2. Используйте CSS, чтобы расположить LABEL поверхINPUT, так что они перекрываются, и похоже, что «Password» находится внутри INPUT.
3. Сделайте так, чтобы LABEL был виден только при применении некоторого класса CSS (например, .showMe)
4. Используйте JavaScript, чтобы скрыть ЭТИКЕТКУ
   • ..., если значение ВХОДА - пустая строка
   • ... или если пользователь выбрал (сфокусирован)ВХОД.

Answer 7

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

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

(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

Answer 8

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

$.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');
});
}

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

$('form').passLabel();