Javascript 在 IE 中显示密码字段的占位符文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6052544/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Showing Placeholder text for password field in IE
提问by JD Audi
I know there is a ton of placeholder questions, but I am trying to perfect mine.
我知道有很多占位符问题，但我正在努力完善我的问题。
My current code works great and does what it's supposed to. The problem is, when I go to place the "password" placeholder, it puts the placeholder in the masking characters. Any ideas on how to get around that?
我当前的代码运行良好，并完成了它应该做的事情。问题是，当我放置“密码”占位符时，它会将占位符放在掩码字符中。关于如何解决这个问题的任何想法？
$(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(''); });
});
}
});
My field for the pass:
我的通行证领域：
<div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div>
回答by Nanzitoph
You could also try this... it detects that the browser does not have support for placeholder and works for all input types
你也可以试试这个...它检测到浏览器不支持占位符并且适用于所有输入类型
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;
}
回答by Jeremy
Could you just swap out the original text field with a password field?
你能用密码字段替换原始文本字段吗？
$('#pass').focus(
function(){
var pass = $('<input id="pass" type="password">');
$(this).replaceWith(pass);
pass.focus();
}
);
<input id="pass" type="text" value="Passowrd">
回答by kei
I ran into this problem with IE before. Here's my solution :)
我之前在 IE 上遇到过这个问题。这是我的解决方案:)
回答by DavidJCobb
If I'm understanding this right, you want the field to say "Password" when nothing has been typed into it; however, "Password" gets displayed as "********".
如果我理解正确，您希望该字段在未输入任何内容时显示“密码”；但是，“密码”显示为“********”。
A decent fix to that (which also degrades gracefully, depending on how you code it) is to:
一个体面的解决方案（它也会优雅地降级，取决于你如何编码）是：
- Put a LABEL before the password INPUT. Set the LABEL's text to "Password", and set its
forattribute to point to the INPUT's ID, so that the INPUT is focused when the LABEL is clicked. - Use CSS to position the LABEL on top of the INPUT, so that they overlap, and it looks like "Password" is inside of the INPUT.
- Make it so that the LABEL is only visible when some CSS class (
.showMe, for example) is applied to it. - Use JavaScript to hide the LABEL
- ...if the INPUT's value is an empty string
- ...or if the user has selected (focused) the INPUT.
- 在密码输入之前放置一个标签。将 LABEL 的文本设置为“密码”，并将其
for属性设置为指向 INPUT 的 ID，以便在单击 LABEL 时聚焦 INPUT。 - 使用 CSS 将 LABEL 定位在 INPUT 的顶部，使它们重叠，并且看起来“密码”在 INPUT 内部。
- 使 LABEL 仅在应用了某些 CSS 类（
.showMe例如）时才可见。 - 使用 JavaScript 隐藏 LABEL
- ...如果 INPUT 的值是空字符串
- ...或者如果用户选择（聚焦）输入。
回答by Wex
Depending on whether or not you want to be able to dynamically change the text inside the placeholder, your simplest solution might be to have the placeholder text be an image.
根据您是否希望能够动态更改占位符内的文本，最简单的解决方案可能是将占位符文本设为图像。
input {
background: url(_img/placeholder.png) 50% 5px no-repeat;
.
.
.
}
input:focus {
background: none;
}
Clearly there are many different ways of using this method, and you will have to use some kind of a fix to get :focusto work on the browsers that don't support it.
很明显，有许多不同的方法可以使用这种方法，您必须使用某种修复程序才能:focus在不支持它的浏览器上工作。
回答by Sébastien
Here my plugin :
这是我的插件：
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();
}
回答by Sébastien
A bit late however same here, i was working on the issue too IE9 doesnot show the password placeholder as text, in almost all the answers on the internet some suggest changing the type some but if u do this u will have another issue on the login page like when you will see with double click on password field as its type changed to text from password, btw it works with prop. e.g. prop("type","password") if you want to change the type of an element.
有点晚了，但这里也一样，我也在解决这个问题 IE9 没有将密码占位符显示为文本，在互联网上几乎所有的答案中，有些人建议更改类型，但如果你这样做，你会在登录时遇到另一个问题页面就像当您双击密码字段时会看到它的类型从密码更改为文本时，顺便说一句，它与道具一起使用。例如 prop("type","password") 如果你想改变一个元素的类型。
on the other hand i think most answers come from a single solution its like focus and blur actions of elements. but when u apply this plugin other text fields will also be effected there is no specific or i can say generlized solution, i have still a minor issue on the login page with the password field but its showing the text correctly. anyway. here is how i have configured, copied,changed and/or another inherited anwers here.
另一方面，我认为大多数答案都来自一个单一的解决方案，比如元素的焦点和模糊动作。但是当你应用这个插件时，其他文本字段也会受到影响，没有具体的或者我可以说是通用的解决方案，我在登录页面上仍然有一个带有密码字段的小问题，但它正确显示了文本。反正。这是我在这里配置、复制、更改和/或其他继承的答案的方式。
(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);
still an active prolem ... :D
仍然是一个活跃的问题......：D
回答by harry
I had the same problem so i wrote a little plugin
我有同样的问题所以我写了一个小插件
$.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');
});
}
now you just call it for the from at it will find all input fields with the password attribute.
现在您只需调用它，它就会找到所有具有密码属性的输入字段。
eg.
例如。
$('form').passLabel();
