Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to create watermark text in TextBox control using jQuery in ASP.NET

Author: Jeff Nava
Download Source Code : 1334_WatermarkTextJQueryCode.zip

In this article, we will learn how to create watermark text in TextBox controls using jQuery in ASP.NET.

 

TextBox controls often require some text to tell user what to enter. It is a good approach when you have so many text fields in your page. Whenever user wants to enter some value in TextBox, it helps user to enter proper and valid value. You can show images in TextBox controls as watermark instead of text. I will show you that how you can create a simple watermark text in TextBox controls and how the watermark text will disappear when user clicks in the TextBox or tab to the TexBox. The watermark text will reappear if user didn’t enter any value in it.

 

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > NewFolder and rename the folder as “Scripts”
  5. Add “jquery-1.4.1.min.js” file in this folder. This is jQuery file that we will use in our example. You have to download it to add it in the folder.
  6. Write below <script> tag in between <head> tag of aspx page

    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

     
  7. Write below code in between <form> tag of aspx page

    <div>
        <table>
            <tr>
                <td>Name</td>
                <td>
                    <asp:TextBox ID="txtboxName" Text="Enter your name here" class="watermarkclass" ToolTip="Enter your name here" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Age</td>
                <td>
                    <asp:TextBox ID="txtboxAge" Text="Enter your age here" class="watermarkclass" ToolTip="Enter your age here" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Gender</td>
                <td>
                    <asp:TextBox ID="txtboxGender" Text="Enter your gender here" class="watermarkclass" ToolTip="Enter your gender here" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>Country</td>
                <td>
                    <asp:TextBox ID="txtboxCountry" Text="Enter your country here" class="watermarkclass" ToolTip="Enter your country here" runat="server"></asp:TextBox>
                </td>
            </tr>
        </table>
    </div>

    Attribute “class” is used here for css class. You can also use “CssClass” attribute here. We will access this attribute in our JavaScript code. Attribute “ToolTip” is very important here. It will render to “title” in JavaScript code.
     
  8. Write below <style> in between <head> tag of aspx page

    <style type="text/css">
        .watermarkclass
        {
            color: #dcdcdc;
            font-family: MS Serif;
            font-weight:bold;
            font-size:medium;
        }
    </style>

     
  9. Write below code in between <head> tag of aspx page

    <script type="text/javascript">
        $(function () {
     
            $(".watermarkclass").each(function () {
                 $txtbox = $(this);
                 if ($txtbox.val() != this.title) {
                    $txtbox.removeClass("watermarkclass");
                 }
            });
     
            $(".watermarkclass").focus(function () {
                $txtbox = $(this);
                if ($txtbox.val() == this.title) {
                    $txtbox.val("");
                    $txtbox.removeClass(".watermarkclass");
                }
            });
     
            $(".watermarkclass").blur(function () {
                $txtbox = $(this);
                if ($txtbox.val() == "") {
                    $txtbox.val(this.title);
                    $txtbox.addClass("watermarkclass");
                }
            });
        });      
    </script>
     
    First function checks the each TextBox value and if it is not the same that we entered then removes the class by using removeClass() method. Second function sets the value of the TextBox as empty and removes the class when user shifts its focus to TextBox.  Third function adds class again to TextBox by using AddClass() method if user shifts its focus to next control without entering any value in TextBox.
     
  10. Save file and press F5 to see in browser. Download entire code from above. 

 

   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< How to create Zip file in ASP.NET

Disclaimer - Privacy
© 2002-2017 DevASP.net