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 () {
$(‘:text’).WaterMark();
});
</script>

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 />
<p>
<asp:Label Text=”Enter First Name” runat=”server” />
<asp:TextBox ID=”txtFirstName” Text=”” ToolTip=”Type your First Name” runat=”server”
Width=”307px”></asp:TextBox>
</p>
<p>
<asp:Label Text=”Enter Last Name” runat=”server” />
<asp:TextBox ID=”txtLastName” Text=”” ToolTip=”Type your Last Name” runat=”server”
Width=”307px”></asp:TextBox>
</p>
<br />
<asp:Button ID=”btnSubmit” runat=”server” Text=”Submit” />
</div>

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

Demo:

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