How to show Password in clear text in password input field when label is being used as value?

Question

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?

<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

Fiddle : 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 delete or backspace key within the string. Pasting a string in the input box can also cause issues.

Of course, you could implement such a feature using selectionStart , selectionEnd and a bunch of key event listeners. This approach isn't waterproof, however.

The closest reliable solution is changing the type to text on focus, and back to password on blur.

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

Alternatively, you can use mouseover to show the password. That way, the user can easily choose whether (s)he wants to use the show-password feature, or not.

Answer 2

You can use the HTML5 placeholder attribute, but quite a few browsers don't support it. As a solution, there's this JSFiddle I wrote, which replaces the password input with a standard text input, and vice versa, on the focus and blur events.

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.

Answer 3

No need to reinvent the wheel if someone has already done it:

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.

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.