Javascript 当标签用作值时，如何在密码输入字段中以明文显示密码？

我正在使用下面的代码，也可以在这个提琴中看到使用标签作为输入值。我可以做什么更改，使密码字段上的标签是明文的，但当它们键入时，标签是隐藏的

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

电子邮件地址


密码




this.label2value=函数（）{
//CSS类名
//输入您想要的任何类名
//在外部css中定义（提供的示例）
var inactive=“inactive”；
var active=“active”；
var focused=“focused”；
//作用
$（“标签”）.each（函数（）{
obj=document.getElementById（$（this.attr（“for”））；
如果（$（obj.attr（“type”）==“text”，“password”）| |（obj.tagName.toLowerCase（）==“textarea”）{
$（obj）.addClass（非活动）；
var text=$（this.text（）；
$（this.css（“显示”、“无”）；
$（obj）.val（文本）；
$（obj）.focus（函数（）{
$（此）.addClass（聚焦）；
$（此）.removeClass（非活动）；
$（此）.removeClass（活动）；
if（$（this.val（）==text）$（this.val（“”）；
}); 
$（obj）.blur（函数（）{
$（此）.removeClass（聚焦）；
if（$（this）.val（）==“”）{
$（this.val）（文本）；
$（此）.addClass（非活动）；
}否则{
$（此）.addClass（活动）；
};              
});             
};  
});     
};
//装载
$（文档）.ready（函数（）{
label2value（）；
});

小提琴：

那是不可能的。例如，

*

是“隐藏”密码的字符。当输入该字符时，脚本无法“记住”它。当用户按下字符串中的

delete

或

backspace

键时，可能会出现另一个问题。在输入框中粘贴字符串也会导致问题

当然，您可以使用

selectionStart

、

selectionEnd

和一组关键事件侦听器来实现这样的功能。然而，这种方法不是防水的

最可靠的解决方案是将焦点上的

类型

更改为

文本

，然后在模糊时返回到

密码

$("#user_password").focus(function(){
    this.type = "text";
}).blur(function(){
    this.type = "password";
})

---

或者，您可以使用

mouseover

显示密码。通过这种方式，用户可以轻松选择是否要使用显示密码功能。

您可以使用HTML5

占位符属性，但许多浏览器不支持它。作为解决方案，我在
focus
和
blur
事件中编写了一个解决方案，它用标准文本输入替换密码输入，反之亦然

代码：

对于那些禁用了JavaScript的人来说，这将很好地降低性能。
如果有人已经这样做了，则无需重新发明轮子：


这只是我在快速谷歌上找到的一个例子。我确信其他一个web开发博客有一个更干净的例子，但不幸的是，我记不起是哪一个了

如果你想自制一个解决方案，你可以随时看到上面的插件是如何实现的，并根据这些原则开发你自己的解决方案。
谢谢，我不希望在下面的答案中出现字母显示，然后像iphone jquery插件一样被屏蔽。你能给我看一个在JSFIDLE中切换输入类型的例子吗？更新了答案，添加了一个链接。我还在提琴中加入了一个
mouseover
和
mouseout
示例。Mouse out工作得很好，因为模糊和焦点与用作值的标签相冲突。谢谢，如果浏览器的“密码自动填充”功能没有在需要密码的域上出错，这将是一个很好的解决方案。
$(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");
    }
});