how to show text in input field "password" and after typing on it switch again to password view

Question

i have some login with password field:

 <input type="password" name="password" id="password" value="Password" maxlength="40" required style="width: 130px; font-size: 10px;" />

as output i have password field with value "Password" which is showed just like "********", what is
clearly. but i want to see it as a text "Password" and just after typing inside show ********. how to do that??

Answer 1

This should work:

<input type="password" name="password" value="password" id="password"  placeholder="Password" maxlength="40" required="" style="width: 130px; font-size: 10px;">

It should be noted that if value attribute is before placeholder attribute, it will take priority and you will see the default value set. (which for a password field, does not make a lot of sense to me).

Answer 2

Use the placeholder attribute.

<input type="password" placeholder="Password" />

jsFiddle.