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 ?

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.