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

Posted on March 23, 2008
Filed Under javascript, tips and technique, tutorial

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.

Popularity: 17% [?]

If you like this post then please subscribe to my full RSS feed . You can also subscribe by email and have new posts sent directly to your inbox.And, You can also follow me on twitter at http://twitter.com/roshanbh.

» Password protect a page using HTTP Authentication in PHP
» SQL Injection Attack - Examples and Preventions in PHP
» Ajax login validation system in PHP using jQuery
» Password Encryption and Decryption Technique in PHP

Comments

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

PHP Coding School » Blog Archive » php tips [2008-03-23 12:36:38] on March 23rd, 2008 12:50 pm

[...] Show text “Password” instead of “********” in the password field By Roshan 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 … Roshan Bhattarai’s Blog - PHP… - http://roshanbh.com.np [...]
Gabe on March 23rd, 2008 3:12 pm

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 on March 23rd, 2008 3:13 pm

And jQuery would make it super easy to accomplish this, too!
Roshan on March 23rd, 2008 3:32 pm

Thanks gabe for the your valuable suggestion, I’ll surely post such a kind of tutorial in the upcoming posts…
ketan on March 28th, 2008 6:22 pm

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 on March 28th, 2008 6:55 pm

thanks ketan..and for that 5 line of code I thought it’s better not to use jquery..
Mike Desjardins on March 28th, 2008 7:44 pm

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 on March 29th, 2008 2:36 am

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 on March 29th, 2008 6:23 am

@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 on June 22nd, 2008 1:50 am

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