Devolopment: Water Mark Text using JQUERY

Implementation

Step 1

Let’s start to create a simple page with two textbox using visual studio 2008 as below.
Design Output

HTML Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <table cellpadding="2" width="250px" style="border:solid 1px gray;"

           cellspacing="2">
        <tr>
            <td colspan="3" align="center">
                <b>Welcome to Signin</b>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="height: 5px;">
            </td>
        </tr>
        <tr>
            <td>
                User Name
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtusername" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox ID="txtpass" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td colspan="3" style="height: 5px;">
            </td>
        </tr>
        <tr>
            <td colspan="3" align="right">
                <asp:Button ID="btnSign" runat="server" Text="Sign In" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

The above login is screen is very simple screen has two input field with one button. Now I’m going to work for display water mark for both input fields. To that we have to import JQuery library and then have to write a simple CSS to apply for water mark with JQuery.

Step 2

Import JQuery library from Google under the HEAD section, like below

<head runat="server">
    <title>The Watermark Demonstration</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"

            type="text/javascript"></script>
</head>

Step 3

Let’s create a simple style to apply watermark effect to username and password textbox.

<head runat="server">
    <title></title>
    <style type="text/css">
        .watermarkOn
        {
            color: #CCCCCC;            
            font:Verdana normal 10px;
        }
    </style>
</head>

Note: When you are work real world web application down write your style sheet within the page. Its increase your page size and Browser does NOT cache your CSS. So better to write as separate CSS file and import in your into your page.

Step 4

Let’s apply the default style effect to textbox. Because when user does not focus the input field, we have to show the watermark, if focused, we have to clear style.

Html Code

<tr>
            <td>
                User Name
            </td>
            <td>
                :
            </td>
            <td>
                <asp:TextBox CssClass="watermarkOn" Text="UserName" ID="txtusername" runat="server"></asp:TextBox>
            </td>
        </tr>

In above snippets, I have applied the default watermarkon style and default text for the user name input field. Apply same to password input field as well.

Step 5

Write few line of JavaScript code to ingrate style and JQuery as like below,

<script language="javascript" type="text/javascript">
  $(document).ready(function() {
      $("#txtusername").focus(function() {
         $(this).filter(function() {return $(this).val() == "" ||

         $(this).val() == "UserName"}).removeClass("watermarkOn").val("");

       });
       $("#txtusername").blur(function() {
          $(this).filter(function() {

           return $(this).val() == ""}).addClass("watermarkOn").val("UserName");
       });
       $("#txtpass").focus(function() {
         $(this).filter(function() {return $(this).val() == "" ||

         $(this).val() == "Password"}).removeClass("watermarkOn").val("");

       });
       $("#txtpass").blur(function() {
         $(this).filter(function() {

           return $(this).val() == ""}).addClass("watermarkOn").val("Password");
       });
   });
</script>

In above code line, I just apply style and remove for two events. When user focus input field, remove style class.

.removeClass("watermarkOn").val("");

As like within in the onblur event, add stlye again to inout field.

.addClass("watermarkOn").val("UserName");

Note: When we are adding watermark style, we have to add default text to input filed.
Let’s run application. output will be like follow,

With Master Page

If you are use the master page above code does not work,beuase when we are use the master page ASP.NET add prefix to all server controls ct100_.... so we have to modify the code work to all situation.

<script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $("[id$=txtusername]").focus(function() {
                $(this).filter(function() {
                    return $(this).val() == "" || $(this).val() == "UserName"
                }).removeClass("watermarkOn").val("");

            });
            $("[id$=txtusername]").blur(function() {
                $(this).filter(function() {
                    return $(this).val() == ""
                }).addClass("watermarkOn").val("UserName");
            });
            $("[id$=txtpass]").focus(function() {
                $(this).filter(function() {
                    return $(this).val() == "" || $(this).val() == "Password"
                }).removeClass("watermarkOn").val("");

            });
            $("[id$=txtpass]").blur(function() {
                $(this).filter(function() {
                    return $(this).val() == ""
                }).addClass("watermarkOn").val("Password");
            });
        });
    </script>

If you are going to apply watermark style with master,please use the above code.

You Can dowlload JQUERY library from the below link

1. http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
2. http://code.jquery.com/latest/ jquery.min.js

Devolopment

Search This Blog

Sunday, June 24, 2012

Water Mark Text using JQUERY