How to show watermark text for password field


The code below shows how to show water mark text for password field.

  <html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head id=”Head1″ runat=”server”>
    <title></title>
    <script type=”text/javascript” src=”JQuery/jquery-1.4.1-vsdoc.js”></script>
    <script type=”text/javascript”>

        $(document).ready(function () {

            $(“#txtPasswordWaterMark”).show();
            $(“#txtPasswordWaterMark”).addClass(“waterMark”);
            $(“#txtPasswordWaterMark”).val(“Password”);
            $(“#<%= txtPassword.ClientID  %>”).hide();

            $(“#txtPasswordWaterMark”).focus(function () {
                $(this).hide();
                $(“#<%= txtPassword.ClientID  %>”).show();
                $(“#<%= txtPassword.ClientID  %>”).focus();
            });

//            $(“#txtPasswordWaterMark”).keydown(function () {
//                $(this).hide();
//                $(“#<%= txtPassword.ClientID  %>”).show();
//                $(“#<%= txtPassword.ClientID  %>”).focus();
//            });

            $(“#<%= txtPassword.ClientID  %>”).blur(function () {

                if ($(this).val() == “”) {
                    $(“#<%= txtPassword.ClientID  %>”).hide();
                    $(“#txtPasswordWaterMark”).show();
                }

            });

        });

    </script>
    <style type=”text/css”>

      .waterMark{
            color : #9B9B9B;
        }

    </style>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <div>
     <asp:TextBox ID=”txtPassword” TextMode=”Password” runat=”server”></asp:TextBox>
     <input type=”text” id=”txtPasswordWaterMark” />
    </div>
    </form>
</body>
</html>

 

Note : Jquery needed to run the above code.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: