How to display text in a password field

Question

I have a password field on the page. I want to display the text "Enter Password" on the screen before entering the password, but when focusing, when the user enters the password, he must return to the password type

EDIT: I am using jQuery, so any small jQuery solution will do

Answer 1

[Latest version to enable IE support]
^{Update for IE9: IE version 9 allows you to change the type attribute for input elements of type text / password back and forth}

As mentioned in the comments (and verified), the previous examples did not work in IE, since it does not allow you to change the type using the script ... Here is a workaround that replaces the element with another, and go ahead (the code assumes that you start with text field)

var element = document.getElementById('mysearch'); var text_to_show = 'Enter Password'; element.value = text_to_show; // set the message for the first time element.onfocus = function(){ if (this.value == text_to_show) { var newElement = convertType(this); newElement.value = ''; setTimeout(function(){document.getElementById(newElement.id).focus()},100); } } element.onblur = function(){ if (this.value == '') { var newElement = convertType(this); newElement.value = text_to_show; } } function convertType(elem) { var input = document.createElement('input'); input.id = elem.id; input.value = elem.value; input.onfocus = elem.onfocus; input.onblur = elem.onblur; input.className = elem.className; if (elem.type == 'text' ) { input.type = 'password'; } else { input.type = 'text'; } elem.parentNode.replaceChild(input, elem); return input; } 

[update]

cancel the original answer, I missed the part that you want to save as a password (with hidden content)

Revised answer :

 var element = document.getElementById('mysearch'); var text_to_show = 'Enter Password'; element.type="text"; // set the type to text for the first time element.value = text_to_show; // set the message for the first time element.onfocus = function(){ if (this.value == text_to_show) { this.type="password"; this.value = ''; } } element.onblur = function(){ if (this.value == '') { this.type="text"; this.value = text_to_show; } } 

[original answer]

 var element = document.getElementById('inputID'); // inputID should be the ID given to the password element var text_to_show = 'Enter Password' element.value = text_to_show; element.onfocus = function(){ if (this.value == text_to_show) this.value = '';} element.onblur = function(){ if (this.value == '') this.value = text_to_show;} 

Strike>

Answer 2

You can use this jQuery plugin which supports password fields.

Answer 3

You can either give it the background of the image with Enter Password text, which you dynamically change using javascript (ideally, just removing the CSS class),

 <input type="password" class="enter-password"> or <input type="password" style="background-image:url('enter-password.png');"> 

or put a fake input , which you replace with javascript for the password input .

I'm not sure how well it will close the browser to change the input type on the fly.

document.getElementsByTagName("input")[0].type = "text" /* change a hidden field to text*/ works in Firefox, but I won’t rely on it to work well on IE without testing.

Answer 4

If you do not want to use a plug-in (for example, the one in response to SLaks ), you need to either put an inscription above the password field (which is the plug-in) or hide the password field and show the text input in its place until it reaches focus.

Internet Explorer does not allow you to change the input type from "password" to "text", so any solution that tries to do this will not work in IE.

Here is an example that works at least in IE7 (it should work in IE6, but I haven't tried it), Chrome and Firefox.

 jQuery(function($) { function make_label_field(password_input, label) { var new_input = document.createElement("input"); new_input.type = "text"; new_input.size = password_input.size; new_input.className = password_input.className; new_input.setAttribute("style", password_input.getAttribute("style")); // Copy any additional properties you need. You may want to add a class // to style the label differently new_input.value = label; $(new_input).focus(function() { $(this).hide(); $(password_input).show().focus(); }); return new_input; } $("input[type=password]").each(function() { $(this).after(make_label_field(this, "Enter password")).hide(); }).blur(function() { if (this.value == "") { $(this).hide().next().show(); } }); }); 

Answer 5

[revised answer] Added compatibility for ie6 from this website

 <form id="form1" name="form1" method="post" action=""> <input onfocus="clear_field(this,'Enter Username')" onBlur="revert_field(this,'Enter Username')" name="username" type="text" id="username" value="Enter Username" /> <p> <input type="text" id="passwordtext" value="Password" onclick="switchto(1)" onkeydown="switchto(1)"> <input type="password" id="password" value="" onblur="if (this.value=='')switchto(0)" style="display:none"> <p> <input type="submit" name="button" id="button" value="Submit" /> </p> </form> <script> function switchto(q){ if (q){ document.getElementById('passwordtext').style.display="none"; document.getElementById('password').style.display="inline"; document.getElementById('password').focus(); } else { document.getElementById('password').style.display="none"; document.getElementById('passwordtext').style.display="inline"; } } function clear_field(field,text){ if(field.value==text){ field.value = ""; } } function revert_field(field,text){ if(field.value==""){ field.value = text; } } </script> 

[previous post] perhaps this help.

         

 <script> function clear_field(field){ field.value=''; } function change(){ document.getElementById('pass').value=''; document.getElementById('pass').type='password'; } </script> 

Strike>

Answer 6

There are several ways to do this, but this is one way. I am not saying that it is effective, but it will better explain what is happening.

Copy and paste this to try it!

 <body> <script type="text/javascript"> text=document.createElement("input"); text.type="text"; text.value="password"; text.setAttribute("onclick", 'toPassword();'); text.setAttribute("onblur", 'toText();'); document.getElementsByTagName("body")[0].appendChild(text); function toText() { if(document.getElementsByTagName("input")[0].value=="password" || document.getElementsByTagName("input")[0].value=="") { document.getElementsByTagName("input")[0].type="text"; document.getElementsByTagName("input")[0].value="password" } } function toPassword() { if(document.getElementsByTagName("input")[0].value=="password" || document.getElementsByTagName("input")[0].value=="") { document.getElementsByTagName("input")[0].type="password"; document.getElementsByTagName("input")[0].value="" } } </script> </body> 

It creates a text field with a password value, and then when you click on it, it then goes into the password field and removes its value. If you click and you don’t enter anything, it will return to text and change its value to password .

You can also enter a text box along with smaller JavaScript code, all you need is functions.

If you want this to work in IE, you would need to create two inputs: one for text and one for password and an alternative display=none and display=block for each of them.

 element.style.display="none";