Javascript 当标签用作值时，如何在密码输入字段中以明文形式显示密码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7589498/
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
How to show Password in clear text in password input field when label is being used as value?
提问by Anagio
I'm using the code below and also seen in this fiddle http://jsfiddle.net/peter/Xt5qu/to use labels as input values. What change can I make so that on password fields the label is in clear text but as they type it's hidden?
我正在使用下面的代码，也在这个小提琴http://jsfiddle.net/peter/Xt5qu/ 中看到使用标签作为输入值。我可以做哪些更改，以便在密码字段上标签是明文，但在他们输入时是隐藏的？
<form id="new_account_form" method="post" action="#" class="login-form">
<ul>
<li>
<label for="user_email">Email address</label>
<input id="user_email" name="user_email" required="" class="validate[required,custom[email]] clearOnFocus login-itext" type="text">
</li>
<li>
<label for="user_password">Password</label>
<input id="user_password" name="user_password" required="" class="validate[required,minSize[6]] clearOnFocus login-itext" type="password">
</li>
<li>
<input name="Submit" type="submit" class="login-ibutton" value="Sign in"></li>
</ul>
</form>
<script script type="text/javascript">
this.label2value = function(){
// CSS class names
// put any class name you want
// define this in external css (example provided)
var inactive = "inactive";
var active = "active";
var focused = "focused";
// function
$("label").each(function(){
obj = document.getElementById($(this).attr("for"));
if(($(obj).attr("type") == "text", "password") || (obj.tagName.toLowerCase() == "textarea")){
$(obj).addClass(inactive);
var text = $(this).text();
$(this).css("display","none");
$(obj).val(text);
$(obj).focus(function(){
$(this).addClass(focused);
$(this).removeClass(inactive);
$(this).removeClass(active);
if($(this).val() == text) $(this).val("");
});
$(obj).blur(function(){
$(this).removeClass(focused);
if($(this).val() == "") {
$(this).val(text);
$(this).addClass(inactive);
} else {
$(this).addClass(active);
};
});
};
});
};
// on load
$(document).ready(function(){
label2value();
});
</script>
回答by Rob W
Fiddle: http://jsfiddle.net/WqUZX/
小提琴：http: //jsfiddle.net/WqUZX/
There's no way to do that. Say, *is the character to "hide" the password. When the inputs that character, the script cannot "remember" it. Another problem could occur when the user presses the deleteor backspacekey within the string. Pasting a string in the input box can also cause issues.
没有办法做到这一点。说，*是“隐藏”密码的字符。当输入该字符时，脚本无法“记住”它。当用户按下字符串中的delete或backspace键时，可能会出现另一个问题。在输入框中粘贴字符串也会导致问题。
Of course, you could implement such a feature using selectionStart, selectionEndand a bunch of key event listeners. This approach isn't waterproof, however.
当然，您可以使用selectionStart,selectionEnd和一堆关键事件侦听器来实现这样的功能。然而，这种方法并不防水。
The closest reliable solution is changing the typeto texton focus, and back to passwordon blur.
最可靠的解决方案是将焦点更改type为text焦点，然后返回password模糊。
$("#user_password").focus(function(){
this.type = "text";
}).blur(function(){
this.type = "password";
})
Alternatively, you can use mouseoverto show the password. That way, the user can easily choose whether (s)he wants to use the show-password feature, or not.
或者，您可以使用mouseover来显示密码。这样，用户可以轻松选择是否要使用显示密码功能。
回答by Bojangles
You can use the HTML5 placeholderattribute, but quite a few browsers don't support it. As a solution, there's this JSFiddleI wrote, which replaces the password input with a standard text input, and vice versa, on the focusand blurevents.
您可以使用 HTML5placeholder属性，但相当多的浏览器不支持它。作为解决方案，我写了这个 JSFiddle，它用标准文本输入替换密码输入，反之亦然，在focus和blur事件上。
Code:
代码：
$(document).ready(function() {
$("input[name='password']").prop("type", "text").val("Password");
});
$("input[name='password']").focus(function() {
if($(this).val() === "Password")
{
$(this).prop("type", "password").val("");
}
});
$("input[name='password']").blur(function() {
if(!$(this).val().length)
{
$(this).prop("type", "text").val("Password");
}
});
This will gracefully degrade for those who have JavaScript disabled.
对于那些禁用 JavaScript 的人来说，这将优雅地降级。
回答by Greg Pettit
No need to reinvent the wheel if someone has already done it:
如果有人已经完成了，则无需重新发明轮子：
http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/
http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/
That's just one example I found with a quick Google. I know for sure one of the other web development blogs had an even cleaner example, but I can't remember which one unfortunately.
这只是我通过快速谷歌找到的一个例子。我确信其他 Web 开发博客中有一个更简洁的示例，但不幸的是我不记得是哪一个。
If you want to homebrew a solution, you could always see how the above plugin is doing it, and develop your own solution based on the principles.
如果你想自制一个解决方案，你总是可以看到上面的插件是如何做的，并根据原理开发自己的解决方案。
