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

Advertisement

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>
<div id="div2" style="display:none">
<input name="password" id="password" type="password" value="" size="20"
maxlength="20" onBlur="restoreBox()" />
</div>

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()
 {
    document.getElementById('div1').style.display='none';
    document.getElementById('div2').style.display='';
    document.getElementById('password').focus();
 }
 function restoreBox()
 {
    if(document.getElementById('password').value=='')
    {
      document.getElementById('div1').style.display='';
      document.getElementById('div2').style.display='none';
    }
 }
</script>

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.

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

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

  • Gabe wrote on 23 March, 2008, 15:12

    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.

  • Gabe wrote on 23 March, 2008, 15:13

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

  • Roshan wrote on 23 March, 2008, 15:32

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

  • ketan wrote on 28 March, 2008, 18:22

    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 :-)

  • Roshan wrote on 28 March, 2008, 18:55

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

  • Mike Desjardins wrote on 28 March, 2008, 19:44

    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!

  • Spacebat wrote on 29 March, 2008, 2:36

    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…

  • Roshan wrote on 29 March, 2008, 6:23

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

    @Spacebat
    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..

  • Phillip wrote on 22 June, 2008, 1:50

    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: http://pastie.org/219689

    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.

    cheers,
    Phillip

  • scott wrote on 20 August, 2008, 6:23

    just what I was lookin’ for! Thanks.

  • Gevorg Ablabutyan wrote on 8 September, 2008, 19:50

    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.

  • DRA wrote on 17 November, 2008, 12:12

    Hi Roshan,

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

  • nanhe wrote on 16 February, 2009, 7:57

    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 ********************
    thanks

  • trevor wrote on 6 March, 2009, 22:48

    this is great! exactly what I need

    Thanks!

  • poorna wrote on 28 July, 2009, 18:15

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

  • patembe wrote on 14 January, 2010, 8:16

    Thank you very much for the nice trick.. :D
    It’s really usefull for me..

  • Mahesh wrote on 5 February, 2010, 9:41

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

    HTML

    Script

    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;
    }
    }

  • Mahesh wrote on 5 February, 2010, 9:42

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

  • Ram wrote on 21 March, 2010, 1:22

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

  • Kris wrote on 16 July, 2010, 5:17

    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..

  • Fabrizio Bartolomucci wrote on 14 February, 2011, 11:38

    Nice tutorial: still I failed to integrate it with another one at:
    http://www.32statuses.com/2010/01/html-field-hints-with-progressive-enhancement/
    to show the hint of the password in gray and italics like the other fields.
    My test is in the iframe of:
    http://www.virtualtags.net/iframe-2/
    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?
    Thanks,
    Fabrizio

  • Alfred wrote on 10 August, 2011, 9:28

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

  • Alfred wrote on 11 August, 2011, 1:19

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

Trackbacks

  1. PHP Coding School » Blog Archive » php tips [2008-03-23 12:36:38]
  2. pligg.com

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.