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

我的传球场：

Answer 1

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

 function FauxPlaceholder() { if(!ElementSupportAttribute('input','placeholder')) { $("input[placeholder]").each(function() { var $input = $(this); $input.after(''); 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 = $(''); $(this).replaceWith(pass); pass.focus(); } );  

http://jsfiddle.net/UrNFV/

Answer 3

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

http://jsfiddle.net/mNchn/

Answer 4

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

对它的一个不错的解决方案（根据你的编码方式也优雅地降级）是：

1. 在密码INPUT之前放置一个LABEL。 将LABEL的文本设置为“Password”，并将其for属性设置for指向INPUT的ID，以便在单击LABEL时聚焦INPUT。
2. 使用CSS将LABEL定位在INPUT的顶部，使它们重叠，看起来“Password”在INPUT内部。
3. 使它成为只有在应用某些CSS类（例如.showMe ）时才能看到LABEL。
4. 使用JavaScript隐藏LABEL
   • …如果INPUT的值是空字符串
   • …或者如果用户选择了（聚焦）INPUT。

Answer 5

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

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

显然，使用此方法有许多不同的方法，您将不得不使用某种修复方法来获取:focus于不支持它的浏览器。

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

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

现在你只需要为它调用它就可以找到所有带有password属性的输入字段。

例如。

 $('form').passLabel(); 

Answer 8

有点迟，但是在这里，我正在研究这个问题，IE9也没有将密码占位符显示为文本，在互联网上的几乎所有答案中都有人建议更改类型，但如果你这样做，你将在登录时遇到另一个问题页面就像你会看到双击密码字段，因为它的类型从密码更改为文本，顺便说一下，它与prop一起工作。 例如prop（“type”，“password”）如果要更改元素的类型。

另一方面，我认为大多数答案来自一个单一的解决方案，它像焦点和模糊元素的行动。 但是当你应用这个插件时，其他文本字段也会受到影响，没有特定的或者我可以说是一般化的解决方案，我在登录页面上仍然有一个小问题，但密码字段正确显示文本。 无论如何。 这里是我如何配置，复制，更改和/或其他inheritance的答案在这里。

 (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