How to show password in password input text box when label is used as value?

Question

I use the code below and also see in this script http://jsfiddle.net/peter/Xt5qu/ use labels as input values. What change can I make so that the label in the password fields is in clear text, but as they type it 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 is no way to do this. Let's say * is a character that "hides" a password. When the inputs that are characteristic, the script cannot "remember" it. Another problem may occur when the user presses the delete or backspace inside the line. Inserting a line in an input field can also cause problems.

Of course, you can implement such a function using selectionStart , selectionEnd and a bunch of key event listeners. However, this approach is not waterproof.

The nearest reliable solution changes type to text for focus and back to password for blur.

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

Alternatively, you can use mouseover to display the password. Thus, the user can easily choose whether he wants to use the show-password function or not.

Answer 2

You can use the HTML5 placeholder attribute, but quite a few browsers do not support it. As a solution, I wrote this JSFiddle , which replaces password input with standard text input and vice versa, for focus and blur events.

the 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 this:

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

Here is just one example that I found using quick google. I know for sure that in one of the other web development blogs there was an even cleaner example, but I don’t remember how unfortunately it was.

If you want to make a home-made solution, you can always see how this plugin does it and develop your own solution based on principles.