Display Watermark Using jQuery For TextBox Controls

Introduction:  In this article i  will demonstrate how we can show watermark effect in asp.net textbox controls using jQuery.

Procedure: Follow these steps.

1. Download the java script that i have created for jquery by clicking this link.

2. Pass the reference of this java script in the head section as follows.

<script src=”../Scripts/WaterMark.min.js” type=”text/javascript”></script>

3. Write following code in the header section of page

                    <script type=”text/javascript”>
           $(document).ready(function () {

I have used ‘:text’ .  This will pick/choose all the asp.net text boxes present  in the page and associate the ToolTip attributes as a watermark.

4. Add Tooltip attribute and write whatever you want to show as watermark text for those controls for whom you want to show the watermark.

4. For an example i am including my code. Put them in body section.

<div >
<p class=”title”>
TextBoxWatermark Demonstration


<br />
<asp:Label Text=”Enter First Name” runat=”server” />
<asp:TextBox ID=”txtFirstName” Text=”” ToolTip=”Type your First Name” runat=”server”
<asp:Label Text=”Enter Last Name” runat=”server” />
<asp:TextBox ID=”txtLastName” Text=”” ToolTip=”Type your Last Name” runat=”server”
<br />
<asp:Button ID=”btnSubmit” runat=”server” Text=”Submit” />

5. Open the page in browser and see the effect.



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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s