"密码"在占位符的IE中显示为"********"

Question

我正在使用HTLM5占位符并添加了modernizr.js以使其在IE中工作.代码段是:

<input type="password" placeholder="Password">

function hasPlaceholderSupport() {
   var input = document.createElement('input');
   return ('placeholder' in input);
}


$(document).ready(function(){
    if(!Modernizr.input.placeholder){ 

        $('[placeholder]').focus(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
                input.removeClass('placeholder');
            }
        }).blur(function() {
            var input = $(this);
            if (input.val() == '' || input.val() == input.attr('placeholder')) {
                input.addClass('placeholder');
                input.val(input.attr('placeholder'));
            }
        }).blur();
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                var input = $(this);
                if (input.val() == input.attr('placeholder')) {
                    input.val('');
                }
            })
        });

    }
});

它适用于其他浏览器,我想input type password在IE中显示文本,但它将占位符放在屏蔽字符中.如何"Password"显示文本.

Answer 1

问题是您的占位符后备脚本正在使用字段的值来显示占位符。

当然，密码字段会隐藏其值，因此该技术将按照您所描述的方式在密码字段上失败。

您需要的是一个占位符脚本，它的工作原理是将占位符文本写入一个额外的元素中，该元素覆盖在字段的顶部（如果字段的背景是透明的，则覆盖在字段的后面）。然后，脚本可以更改此元素，而不是更改字段的值。

有一大堆可用的脚本可以做到这一点 -例如这个（但也有许多其他脚本）。

另一个选项是每当切换占位符时，动态地将字段类型从 更改password为text，然后再更改回来。这可能会更快地适应您现有的代码，但从长远来看，我建议使用其他技术。

希望有帮助。