Question

我正在使用下面的代码，也可以在这个小提琴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>

Answer 1

小提琴：http://jsfiddle.net/WqUZX/

没有办法做到这一点。比如说，*是“隐藏”密码的字符。当输入那个字符时，脚本不能“记住”它。当用户按下字符串中的delete或backspace键时，可能会出现另一个问题。在输入框中粘贴字符串也会导致问题。

当然，您可以使用selectionStart，selectionEnd和一堆关键事件侦听器来实现此类功能。然而，这种方法并不防水。

最接近的可靠解决方案是将焦点上的type更改为text，并在模糊时更改为password。

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

或者，您可以使用mouseover来显示密码。这样，用户可以轻松选择是否要使用show-password功能。

Answer 2

您可以使用HTML5 placeholder属性，但不少浏览器不支持它。作为一个解决方案，我写了this JSFiddle，用focus和blur事件替换了标准文本输入的密码输入，反之亦然。

代码：

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

对于已禁用JavaScript的用户，这会优雅地降级。

Answer 3

如果有人已经这样做，则无需重新发明轮子：

http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/

这只是我用快速Google发现的一个例子。我肯定知道其他一个Web开发博客有一个更清晰的例子，但遗憾的是我不记得哪一个。

如果您想自制一个解决方案，您可以随时查看上述插件是如何做到的，并根据原则开发自己的解决方案。

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

3 个答案: