Javascript Water mark effect for your password field

Most of web developers like or not, they have to deal with forms every time. There can be password fields available in your form itself with a magical effect of water mark. Herewith I would like to simulate a way to implement this functionality.

Functionality: We can have 3 textboxes (one to hold password, second to hold default text to be appeared and last one for move between 2 text boxes previously mentioned). So if there were no text in first text box we show second text box with default text, if else show password text with letters with hidden characters. 

So lets strart to implement.

1.Open VS 2008/2010 and open a new ASP.Net project

2.Add Text box and make it a password type (see the code snippet below)

<div id="divPassword">

        <asp:TextBox ID="txtCurrentPassword" TextMode="Password" runat="server"

            onblur="restorePassword('divPassword', 'divDummyPassword')"></asp:TextBox>

    </div>

Note: javascript function refer in onblur attribute will be describe in below steps

3.Then add next text box which is holding the default text to be appeared when there were no characters

<div id="divDummyPassword">

        <asp:TextBox ID='txtDummyPassword' runat='server' Text="Enter your current password"

            onfocus="changePassword('divPassword', 'divDummyPassword')"></asp:TextBox>

    </div>

4.Then add 3rd text box which is a hidden text box to show when user click on first text box 

<div>

        <input id="PasswordHidden" runat="server" type="hidden" />

    </div>

As you can see we are calling "onblur" function and "onfocus" function in different occasion. It's because we are going to load default text based text box initially with "onfocus" and "onblur" used while leaving password text box.

So lets see how our 2 javascripts being design

<script language="JavaScript" type="text/javascript">

        function changePassword(divPassword, divDummyPassword) {

            document.getElementById(divPassword).style.display = '';

            document.getElementById(divDummyPassword).style.display = 'none';

            document.getElementById('<% =txtCurrentPassword.ClientID %>').focus();

        }

        function restorePassword(divPassword, divDummyPassword) {

            if (document.getElementById('<% =txtCurrentPassword.ClientID %>').value == '') {

                document.getElementById(divPassword).style.display = 'none';

                document.getElementById(divDummyPassword).style.display = '';

            }

        }

    </script>

As you can see, we just show and hide 2 divs, clear and assign focus appropriately to view and show the default text. So what about hidden field we implemented. Whenever user click on default text, our hidden textbox holding the values we are entering with temporary basis and then assign our values to correct text box for use further.

<script language="JavaScript" type="text/javascript">

        if (document.getElementById('<% =PasswordHidden.ClientID %>').value != '' && document.getElementById('<% =txtCurrentPassword.ClientID %>').value == '') {

            document.getElementById('<% =txtCurrentPassword.ClientID %>').value = document.getElementById('<% =PasswordHidden.ClientID %>').value;

            document.getElementById('divPassword').style.display = '';

            document.getElementById('divDummyPassword').style.display = 'none';

        }

        else {

            document.getElementById('divPassword').style.display = 'none';

            document.getElementById('divDummyPassword').style.display = '';

        }

    </script>

Note: this script should appear just above the end of form tag.

Whole sample:

<form runat="server">



 <script language="JavaScript" type="text/javascript">




        function changePassword(divPassword, divDummyPassword) {
            document.getElementById(divPassword).style.display = '';
            document.getElementById(divDummyPassword).style.display = 'none';
            document.getElementById('<% =txtCurrentPassword.ClientID %>').focus();
        }


        function restorePassword(divPassword, divDummyPassword) {
            if (document.getElementById('<% =txtCurrentPassword.ClientID %>').value == '') {
                document.getElementById(divPassword).style.display = 'none';
                document.getElementById(divDummyPassword).style.display = '';
            }
        }
    </script>


    <div id="divPassword">
        <asp:TextBox ID="txtCurrentPassword" TextMode="Password" runat="server"
            onblur="restorePassword('divPassword', 'divDummyPassword')"></asp:TextBox>
    </div>
    <div id="divDummyPassword">
        <asp:TextBox CssClass="txt_w187" ID='txtDummyPassword' runat='server' Text="Enter your current password"
            onfocus="changePassword('divPassword', 'divDummyPassword')"></asp:TextBox>
    </div>
    <div>
        <input id="PasswordHidden" runat="server" type="hidden" />
    </div>


    <script language="JavaScript" type="text/javascript">


        if (document.getElementById('<% =PasswordHidden.ClientID %>').value != '' && document.getElementById('<% =txtCurrentPassword.ClientID %>').value == '') {
            document.getElementById('<% =txtCurrentPassword.ClientID %>').value = document.getElementById('<% =PasswordHidden.ClientID %>').value;
            document.getElementById('divPassword').style.display = '';
            document.getElementById('divDummyPassword').style.display = 'none';
        }
        else {
            document.getElementById('divPassword').style.display = 'none';
            document.getElementById('divDummyPassword').style.display = '';
        }
    </script>


    </form>


Note: Don't just copy and paste, allocate some time to understand the flow of the script