在 IE 中显示密码字段的占位符文本答案

【问题标题】：Showing Placeholder text for password field in IE在 IE 中显示密码字段的占位符文本
【发布时间】：2011-08-28 11:53:02
【问题描述】：

我知道有很多占位符问题，但我正在努力完善我的问题。

我当前的代码运行良好，并且可以按预期工作。问题是，当我放置“密码”占位符时，它会将占位符放在掩码字符中。关于如何解决这个问题的任何想法？

    $(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>

【问题讨论】：

标签： javascript jquery html css internet-explorer

【解决方案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;
    }

【讨论】：

这对我来说效果很好，我做的一个小补充是如果字段有值则不显示虚假字段。这有助于验证失败并且您正在重新加载表单或其他内容的地方。添加类似的内容： if ($input.val() === '') { $faux.show(); $input.hide(); }
用modernizr 和它的if (!Modernizr.input.placeholder) 很棒
如何解决密码占位符不能显示为星号的问题？
这是一个很棒的小功能。 @Fronker 此函数创建一个“人造”标准输入以位于密码（或其他）字段的前面并充当占位符。当您点击它时，它会切换到“真实”输入字段，无论是密码还是文本。

【解决方案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/

【讨论】：

@Jeremy，检查我更新的输入字段问题。这很好用，但是当你选择其他东西时，它不会回来..
如果你想让它回来，你只需要更深一层，在新密码文本字段中添加一个focus事件处理程序。我知道，还有一些家务要做，但可能还不错。
@jeremy，我不确定如何将其合并到我的脚本中。我对 jquery 还不是很好。。
@Wesley：您需要重新阅读正在发生的事情。 @JD 想让文本域说“密码”而不是“********”，然后当用户点击文本域时，它变成了密码域。
@Wesley：@JD 想要更简单，所以我给了他更简单的。它最初是否是密码字段这一事实并不重要。它提供的唯一安全性是可见性。

【解决方案3】：

我之前在 IE 上遇到过这个问题。这是我的解决方案:)

http://jsfiddle.net/mNchn/

【讨论】：

ie7 及以上。我没有费心检查下面的任何内容。
你不只是手动在盒子上放置一个跨度..对吗？
是的，但您不需要跨度或 div。（只是我必须处理的规范）重做没有 div 和 span：jsfiddle.net/f5fYc

【解决方案4】：

如果我理解这一点，您希望该字段在没有输入任何内容时显示“密码”；但是，“密码”显示为“********”。

一个不错的解决方法（它也会优雅地降级，具体取决于您的编码方式）是：

在密码 INPUT 之前放置一个 LABEL。将 LABEL 的文本设置为“密码”，并将其for 属性设置为指向 INPUT 的 ID，以便在单击 LABEL 时聚焦 INPUT。
使用 CSS 将 LABEL 放置在 INPUT 的顶部，使它们重叠，看起来“密码”在 INPUT 内部。
使 LABEL 仅在应用了某些 CSS 类（例如.showMe）时才可见。
使用 JavaScript 隐藏标签
- ...如果 INPUT 的值为空字符串
- ...或者如果用户选择（聚焦）了 INPUT。

【讨论】：

@太复杂了，当我们进行更改时将很难维护.. 不过谢谢，我会记住
我去年使用这种技术来实现自定义文件上传文本字段，效果很好。然而，这是唯一的选择。我确信有一种更清洁的方法可以做到这一点。
表面上听起来是个好主意，但请记住，某些浏览器（我拥有的当前版本的 Firefox）在单击标签时不会聚焦该字段。因此，如果标签在字段上方，这可能是那些浏览器中的问题，除非您也处理点击事件 - 但不是这样简单的解决方案。

【解决方案5】：

根据您是否希望能够动态更改占位符内的文本，您最简单的解决方案可能是将占位符文本设置为图像。

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

显然有许多不同的方法可以使用此方法，您必须使用某种修复程序才能让:focus 在不支持它的浏览器上工作。

【讨论】：

对于我在使用旧 IE 版本、占位符和密码字段时遇到的所有困难，这实际上是一个非常省时的修复方法。最终，is 满足与占位符相同的要求。谢谢。

【解决方案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 at 它将找到所有输入字段的密码属性。

例如。

$('form').passLabel();

【讨论】：

【解决方案8】：

这里有点晚了，但同样如此，我也在解决这个问题 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

【讨论】：