Visible text “Password” instead of “********” in the password field

As you know, the user login box of the website contains the following fields username and password. Furthermore, most of them put the “Username” inside user name field and “********” inside password field to save the space within designing.In this post I’ll show you how to show “Password” text in the password field. It doesn’t actually does so but this tips will make it looks like so.

Now, forget about the user name field. Let’s talk about password field. It would have been user friendly to show “Password” in the password field instead of showing “********” in the password field. Am i right ?

You can view the demo by clicking here.

Now let’s look at the code to do this, here is the Html code for this,

<div id="div1">
<input name="pass_temp" type="text" value="Password" size="20"
maxlength="20" onfocus="changeBox()" />
<div id="div2" style="display:none">
<input name="password" id="password" type="password" value="" size="20"
maxlength="20" onBlur="restoreBox()" />

As you can see above, I’ve to place the two input field inside two separate divs. One temporary text field for showing “Password”. And the other one is the real password field which contains the real password value.

When the focus is moved to the text box , it calls the javascript function called “changeBox()” and when the focus is moved away from the real “password” field, “restoreBox()” is called.

Now, let’s look the JavaScript code,

<script language="javascript">
 function changeBox()
 function restoreBox()

As you can see in the “changeBox()” function, it hides the first div,shows the second div and finally move the focus to the real password field within “div2″.

In the restoreBox() function, if the value of the “password” field is empty string the restore the box to the previous state.

You can download the full source code by clicking here.

25 thoughts on “Visible text “Password” instead of “********” in the password field

  1. Nice tutorial, simple effective way to add a little flare to the traditionally boring “password” input element. In some instances it might also be cool to keep hiding the password input after the user enters the password, maybe making it say “Password Accepted” or something in the onblur event if they have entered a correct password. I’m thinking an ajax post to the db immediately validating the username/password combination. I know that I have a million passwords to manage, so it would be cool to have that instant feedback when on a site.

  2. And jQuery would make it super easy to accomplish this, too!

  3. Thanks gabe for the your valuable suggestion, I’ll surely post such a kind of tutorial in the upcoming posts…

  4. also you could toggle the ‘type’ attribute of the input field btw ‘text and ‘password’. That should work fine. And ofcourse using jQuery wouldnt hurt :-)

  5. thanks ketan..and for that 5 line of code I thought it’s better not to use jquery..

  6. Very cool tutorial… glad to see how this is done.

    Truth be told, I’ve always kinda disliked it when people put “username” and “password” in the input fields instead of labeling the fields separately… I feel like it doesn’t adequately cue the user when the context is placed *inside* the text field.

    But I’m glad to see how to do it if I ever find the need!

  7. This doesn’t degrade gracefully when javascript is turned off. Indeed, it makes it impossible to login because the password field isn’t made available.

    Ideally the source of the form would look as it does normally and javascript would insert a text input next to the password one in the DOM, toggle the visibility and add the event handlers for the purposes you describe here.

    You’ve made a good start though…

  8. @mike
    Thanks a lot for appreciation…hope to server same kinda tutorials in future…

    Even ajax doesn’t work when javaScript is turned off.Furthermore, in your code you can use the posted value of actual password field to do so..and you can login man…if you can’t login do tell me..I’ll can make you login through this kinda system..

  9. Phillip

    Your solution was helpful, but I had some usability issues… It is better to specify …style.display=’inline’ instead of …style.display=”

    Also, you can do this all without the surrounding divs. I’ve made a working demo and posted it here:

    In this example, I made something similar for an email field.

    After digging around online for other solutions, I saw one where someone did something like: document.getElementById(‘inputId’).type = “password” or “text”

    that seemed to work well, but was a bit too sketchy for my taste, as I was worried about the potential for submitting old passwords.


  10. scott

    just what I was lookin’ for! Thanks.

  11. Here is my solution:

    function changeToPassword(){
    document.login.password.type = “password”;
    document.login.password.value = “”

    I call this on both the onSelect and onClick events so that when the user tabs to the field, the script does its thing too.

  12. DRA

    Hi Roshan,

    Just a quick note. This does not work on IE. Any reason / idea why ?

  13. hi
    your article is good but how can show password in login field like
    face book
    fust upon show password when we click then show ********************

  14. this is great! exactly what I need


  15. poorna

    Isnt working for me. My password field dissappears on clicking! any idea?

  16. Thank you very much for the nice trick.. 😀
    It’s really usefull for me..

  17. Mahesh

    Idea is good…. but i think we can do it in a better way!



    function setBoxToPasswordmode(box) {
    if (box.value == box.defaultValue) {
    box.type = “password”;
    box.value = “”;

    function resetBox(box) {
    if (box.value == “”) {
    box.type = “text”;
    box.value = box.defaultValue;

  18. Mahesh

    HTML Goes Here
    <input type=”text” id=”Username” value=”User Name” />
    <input type=”text” onfocus=”setBoxToPasswordmode(this)” onblur=”resetBox(this)” id=”fname” value=”Password” />

  19. Ram

    i did not get to how to use this code, plz help me how to use this..

  20. Kris

    Cool, A useful feature I wouldn’t have otherwise thought of.. The only thing I wonder is since people are so used to the dots, are they going to assume that their password will be visible. Obviously it won’t, but Im sure some people would be suspicious at first..

  21. Nice tutorial: still I failed to integrate it with another one at:
    to show the hint of the password in gray and italics like the other fields.
    My test is in the iframe of:
    where you may see User Name and eMail are grey and italics, while password is black and plain.

    What should I change in the code to have this last like the others?

  22. Alfred

    Hi, how to use the above form code in joomla login form ?

  23. Alfred

    Fixed* Just replace the input name with Joomla in mod_login > default.php, under password, replace it with Joomla password name.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>