javascript 用于在 IE8 中输入密码的 jQuery 输入占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13415151/
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
jQuery input placeholder for type password in IE8
提问by Dhamu
I am using jQuery instead of HTML5 placeholder attribute
我使用 jQuery 而不是 HTML5 占位符属性
<input type="text" name="email" value="Email" onfocus="if (this.value == 'Email') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Email'; }" onclick="if (this.value == 'Email') { this.value = ''; }" />
this is working fine for type="text"but for type="password"it show only *
这工作正常，type="text"但type="password"只显示*
How i will use placeholder for password field? Need out in IE8
我将如何使用占位符作为密码字段？在 IE8 中需要
Advance thanks for answers...
预先感谢您的回答...
回答by Anil
I create a normal input, and on focusswitch it to a password field, and if the value is empty on blur, then switch it back to a normal input, else leave it as the password field.
我创建一个普通输入，然后focus将其切换到密码字段，如果该值为空blur，则将其切换回普通输入，否则将其保留为密码字段。
Here is a working JSFiddle:http://jsfiddle.net/q8ajJ/
这是一个有效的 JSFiddle：http : //jsfiddle.net/q8ajJ/
The HTML
HTML
<!-- Style = display none for people who dont have javascript -->
<input type="text" name="fake_pass" id="fake_pass" value="Enter Password:" style="display:none"/>
<input type="password" name="real_pass" id="real_pass"/>?
The Javascript (jQuery)
Javascript (jQuery)
// On DOM ready, hide the real password
$('#real_pass').hide();
// Show the fake pass (because JS is enabled)
$('#fake_pass').show();
// On focus of the fake password field
$('#fake_pass').focus(function(){
$(this).hide(); // hide the fake password input text
$('#real_pass').show().focus(); // and show the real password input password
});
// On blur of the real pass
$('#real_pass').blur(function(){
if($(this).val() == ""){ // if the value is empty,
$(this).hide(); // hide the real password field
$('#fake_pass').show(); // show the fake password
}
// otherwise, a password has been entered,
// so do nothing (leave the real password showing)
});
?
?
回答by Smileek
Hereis another dirty hack - you can create labelwith position: absoluteand show/hide it with JS on focus and blur.
这里是另一种肮脏的黑客-您可以创建label具有position: absolute与JS显示/隐藏焦点和模糊。
As far as I know, it works in any browser. Moreover, it is more simple to validate form submitting.
据我所知，它适用于任何浏览器。此外，验证表单提交更简单。
HTML
HTML
<div class="wrapper">
<input class="withPlaceholder" type="password" id="pass" />
<label class="placeholder" for="pass">Password</label>
</div>
<br />
<div class="wrapper">
<input class="withPlaceholder" type="password" id="pass2" />
<label class="placeholder" for="pass2">Password2</label>
</div>
CSS
CSS
div.wrapper {position: relative}
label.placeholder {position: absolute; color: #CCC; left: 2px; top: 0}
JS
JS
$("input.withPlaceholder").on({
focus: function() {
$("label[for=" + $(this).prop("id") + "]").hide();
},
blur: function() {
if ($(this).val().length == 0) {
$("label[for=" + $(this).prop("id") + "]").show();
}
}
});
回答by simdrouin
Based on JustAnil's answer, and looking for a way to avoid having to manually add each corresponding for every password fields, I came up with this adaptation of JustAnil's solution:
基于 JustAnil 的回答，并寻找一种方法来避免为每个密码字段手动添加每个对应的字段，我想出了 JustAnil 解决方案的这种改编：
function ManagePasswords(root) {
root.find('input[type=password][placeholder]').each(function (index, current) {
var $current = $(current),
$fake = $current.clone().attr('type', 'text');
$fake.val($fake.attr('placeholder'));
$fake.insertBefore($current);
$current.hide();
$fake.focusin(function () {
$(this).hide();
$(this).next().show().focus();
});
$current.blur(function () {
if ($(this).val() == '') {
$(this).hide();
$(this).prev().show();
}
});
});
}
Then all you have to do is call
然后你所要做的就是打电话
ManagePasswords($('#rootElement'));
Hope this helps!
希望这可以帮助！
回答by Abhishek
Adding another inputelement for the placeholder may create trouble during formvalidation and submission. I solved this in a different way.
input为占位符添加另一个元素可能会在form验证和提交过程中造成麻烦。我以不同的方式解决了这个问题。
The HTML
HTML
<form id="test">
<input type="text" id="name" name="name" placeholder="Name" />
<input type="password" id="password" name="password" placeholder="Password" />
</form>
jQuery Function
jQuery 函数
function placeholder(form) {
form.wrapInner('<ul style="list-style: none; list-style-type:none; padding:0; margin: 0;">');
form.find('input[placeholder]').each(function (index, current) {
$(current).css('padding', 0).wrap('<li style="position: relative; list-style: none; list-style-type:none; padding:0; margin: 0;">');
var height = $(current).parent('li').height();
var $current = $(current),
$placeholder = $('<div class="placeholder">'+$current.attr('placeholder')+'</div>');
$placeholder.css({'color': '#AAA', 'position':'absolute', 'top': 0, 'left': 0, 'line-height': height+'px', 'margin': '0 0 0 5px', 'border': '0 none', 'outline': '0 none', 'padding': 0});
$placeholder.insertAfter($current);
$current.removeAttr('placeholder');
$placeholder.click(function(){
$current.focus()
});
$current.keypress(function(){
if($(this).val().length >= 0) {
$placeholder.hide();
}
});
$current.blur(function(){
if($(this).val().length == 0) {
$placeholder.show();
} else {
$placeholder.hide();
}
});
});
}
Now just call function for your form.
现在只需为您的表单调用函数。
placeholder($("#test"));
This will work for all type of input field with placeholder including type="password"tested in IE8, IE9, IE10, Google Chrome, FireFox, Safari and Opera.
这将适用于所有类型的带有占位符的输入字段，包括type="password"在 IE8、IE9、IE10、谷歌 Chrome、FireFox、Safari 和 Opera 中测试。
回答by beau
Use this code, jQuery will do the rest...
使用此代码，jQuery 将完成剩下的工作...
html tag replace
html标签替换
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><html><![endif]-->
jQuery goodness...
jQuery 善良...
$(document).ready(function(){
$('.ie8 [placeholder][type="password"]').each(function(){
$(this).wrap('<div style="position: relative;"></div>');
$('<span style=" position: absolute;top: 5px;left:14px;" class="ie8Lbls">'+$(this).attr('placeholder')+'</span>').insertAfter($(this));
$(this).attr('placeholder','');
if($(this).val() == "") {$(this).parent().find('.ie8Lbls').show();}
}).on('focus',function(){
$(this).parent().find('.ie8Lbls').hide();
}).on('blur',function(){
if($(this).val() == "") {$(this).parent().find('.ie8Lbls').show();}
});
$(document).on('click','.ie8Lbls',function(){
$(this).parent().find('input').focus();
});
});
style to change the looks of the new placeholder
改变新占位符外观的样式
<style>
.ie8Lbls {
font-size:10px;
}
</style>
