I have the password field on page. I want to display text "Enter password" on screen before entering password but on focus when user enter password it should go back to password type
EDIT: I am using Jquery as well so any small jquery solution will do
[Latest revisision to include IE support]
Update for IE9: Version 9 of IE allows the change of 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 as it does not allow the change of the type by script ... Here is a workaround, which replaces the element with another back-and-forth (code assumes you start with a text box)
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]
scrap the original answer, i missed the part that you want to keep the field as password (with hidden contents)
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;}
You can either give it an image background with the text Enter Password that you change dynamically using javascript (ideally by just removing a CSS class),
<input type="password" class="enter-password"> or
<input type="password" style="background-image:url('enter-password.png');">
or place a fake input that you replace with javascript for a password input.
I'm not sure how well it would cross browser to change the type of input on the fly.
document.getElementsByTagName("input")[0].type = "text" /* change a hidden field to text*/ works on Firefox, but I wouldn't rely on it working well on IE without testing.
If you don't want to use a plugin (like the one in SLaks' answer), you have to either position a label above the password field (what the plugin does), or hide the password field and show a text input in its place until it gets the focus.
Internet Explorer doesn't let you change an input's type from "password" to "text", so any solution that tries to do that won't work in IE.
Here's an example that works in at least 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();
}
});
});
[ 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 ] maybe this help.
<script>
function clear_field(field){
field.value='';
}
function change(){
document.getElementById('pass').value='';
document.getElementById('pass').type='password';
}
</script>
There are several ways to do it but here is one way. I'm not saying that this is efficient but this will explain better of what is happening.
Copy and paste this to try it out!
<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 value of password and then when you click in it, it then changes to password field and removes its value. If you click and you did not enter anything then it will return to a text and change its value to password.
You may also enter a text field along with less javascript code too, all you would need is the functions.
If you want this to work in IE you would need to create two inputs, one for text and one for password and alternate display=none and display=block on each of them.
element.style.display="none";
