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