How to display "username" and "password" as default in text boxes in javascript?

Question

I want two text boxes with default text in both i.e "username" and "password". When we click inside the text box the text should disappear so the user can type their own username and password.

However, the password field is not readable by default.

How is it possible, kindly help me??? Thanks in advance.

Answer 1

You can't do it simply my changing the value, as you've discovered. Nor can you change the type of the input from "text" to "password" when you click on it.

There are a couple of options I can think of -

1. Use a background image with "password" written on it and remove the background when the input is focussed.

2. Make the input transparent and place it over <div>password</div> then hide that <div> on focus (or put the div on top and call input.focus() when it's clicked on).

Answer 2

Checkout jQuery Plugin, http://fuelyourcoding.com/scripts/infield/

It is exactly what you want

Answer 3

What you could do is apply a background image in your css with the username and password text inside it (as setting a value to a password field wil give you "****"). Then check the values of the textboxes like the following:

<input type="text" class="username" name="username" onclick="if (this.class = 'username') { this.class == '' }" onblur="if (this.value == '') { this.class = 'username'; }" />

Please note that I have not tested this but I am sure you could do somthing along these lines