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

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

我当前的代码工作得很好，并且做了它应该做的事情。问题是，当我放置“密码”占位符时，它会将占位符放在屏蔽字符中。你有什么办法来解决这个问题吗

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

---

如果我理解正确，您希望字段在未键入任何内容时显示“密码”；但是，“密码”显示为“*******”

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

在密码输入之前放置一个标签。将标签文本设置为“密码”，并将其

for

属性设置为指向输入的ID，以便在单击标签时聚焦输入

使用CSS将标签放置在输入的顶部，使它们重叠，看起来“密码”就在输入的内部

将其设置为仅当某个CSS类（

.showMe

）应用于标签时，标签才可见

使用JavaScript隐藏标签

• …如果输入的值是空字符串
• …或者如果用户已选择（聚焦）输入

---

你能不能把原来的文本字段换成密码字段

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

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

$（“#通过”）。焦点(
函数（）{
var pass=$（''）；
$（此）.替换为（通过）；
pass.focus（）；
}
);

---

我以前在IE上遇到过这个问题。这是我的解决方案：）

---

你也可以试试这个。。。它检测到浏览器不支持占位符，并且适用于所有输入类型

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

函数FauxPlaceholder（）{
如果（！ElementSupportAttribute（'input'，'placeholder'））{
$（“输入[占位符]”）。每个（函数（）{
var$input=$（此）；
$input.after（''）；
var$faux=$（'#'+$input.attr（'id'）+'-faux'）；
$faux.show（）.attr（'class'，$input.attr（'class'））.attr（'style'，$input.attr（'style'））；
$input.hide（）；
$faux.focus（函数（）{
$faux.hide（）；
$input.show（）.focus（）；
});
$input.blur（函数（）{
如果（$input.val（）==''）{
$input.hide（）；
$faux.show（）；
}
});
});
}
}
功能元素SupportAttribute（elm、attr）{
var测试=document.createElement（elm）；
返回测试中的attr；
}

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

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

---

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

：focus

我也有同样的问题，所以我写了一个小插件

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

现在您只需从中调用它，它将找到所有带有密码的输入字段 属性

例如

这里是我的插件：

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

---

虽然有点晚了，但我也在研究这个问题IE9没有将密码占位符显示为文本，在互联网上几乎所有的答案中，有些人建议更改类型，但如果您这样做，您将在登录页面上遇到另一个问题，比如当您双击密码字段时，它的类型从密码更改为文本，顺便说一句，它与道具一起工作。e、 如果要更改元素的类型，请使用prop（“type”、“password”）

另一方面，我认为大多数答案来自于一个单一的解决方案，比如聚焦和模糊元素的动作。但是当你应用这个插件时，其他文本字段也会受到影响，没有具体的或者我可以说是通用的解决方案，我在登录页面上仍然有一个关于密码字段的小问题，但是它正确地显示了文本。无论如何以下是我在这里配置、复制、更改和/或其他继承Anwer的方式

(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

@太复杂了，在我们进行更改时很难维护。。不过，谢谢你，我会记住的。去年我用这种技术实现了一个自定义文件上传文本字段，效果非常好。然而，这是唯一的选择。我相信有一个更干净的方法可以做到这一点。表面上听起来是个不错的主意，但请记住，一些浏览器（我拥有的Firefox的当前版本）在点击标签时不会聚焦该字段。因此，如果标签位于字段上方，则在这些浏览器中可能会出现问题，除非您也处理单击事件，但这不是一个简单的解决方案。@Jeremy，请检查我更新的问题中的输入字段。这很有效，但是当你选择其他东西时，它不会回来。如果你想让它回来，你只需要更深一层，在新密码文本字段中添加一个

焦点
事件处理程序。我知道，还有一些家务活要做，但可能没那么糟糕。@jeremy，我不知道如何把它融入我的剧本中。。我对jquery还不是很在行。@Wesley：你需要重新阅读正在发生的事情@JD希望文本字段显示“密码”而不是“*******”，然后当用户单击文本字段时，它会变成密码字段。@Wesley:@JD希望更简单，所以我给了他更简单。它最初是否是密码字段并不重要。它提供的唯一安全性是visibility.ie7及更高版本。我没有费心检查下面的任何内容。你不是只是在盒子上手动定位一个跨度吗。。是吗？是的，但你不需要跨度或div。（这只是我必须处理的一个规范）在没有div和span的情况下重做：这对我来说很好，我做的一个小补充是，如果字段有值，就不显示人造字段。这对valida所在的地方很有帮助
(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);