Create an ASP.NET TextBox Watermark Effect using jQuery

Posted by: Suprotim Agarwal , on 12/6/2009, in Category jQuery and ASP.NET
Views: 96925
Abstract: This short article demonstrates how to create a watermark effect on your TextBox and display instructions to users, without taking up screen space
Create an ASP.NET TextBox Watermark Effect using jQuery
 
This short article demonstrates how to create a watermark effect on your TextBox and display instructions to users, without taking up screen space. This article is a sample chapter from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls. The chapter has been modified a little to publish it as an article.
Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability.
Let us quickly jump to the solution and see how we can create a watermark effect on your TextBox using client-side code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>TextBox WaterMark</title>
    <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>  
   
    <style type="text/css">
    .water
    {
         font-family: Tahoma, Arial, sans-serif;
         color:gray;
    }
    </style>
   
    <script type="text/javascript">
        $(function() {
 
            $(".water").each(function() {
                $tb = $(this);
                if ($tb.val() != this.title) {
                    $tb.removeClass("water");
                }
            });
 
            $(".water").focus(function() {
                $tb = $(this);
                if ($tb.val() == this.title) {
                    $tb.val("");
                    $tb.removeClass("water");
                }
            });
 
            $(".water").blur(function() {
                $tb = $(this);
                if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }
            });
        });       
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="smallDiv">
     <h2>TextBox Watermark Demonstration</h2>    <br />          
        <asp:TextBox ID="txtFNm" class="water" Text="Type your First Name"
        Tooltip="Type your First Name" runat="server"></asp:TextBox><br />
        <asp:TextBox ID="txtLNm" class="water" Text="Type your Last Name"
        Tooltip="Type your Last Name" runat="server"></asp:TextBox>
        <br /><br />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
        <br /><br />
        Tip: Click on the TextBox to start typing. The watermark
        text disappears.
    </div>
    </form>
</body>
</html>
 
The code shown above adds the “watermark” behavior to controls marked with the ‘class=water’ attribute. When the user loads the page, a watermarked textbox displays a message to the user. As soon as the watermarked textbox receives focus and the user types some text, the watermark goes away. This technique is a great space saver as you can use it to provide instructions to the user, without using extra controls that take up valuable space on your form.
   The ‘Tooltip’ attribute applied to the textbox is crucial to this example. The ‘Tooltip’ gets rendered as ‘title’. Observe the code, as we use this ‘title’ property to compare it to the textbox value and remove the watermark css, when the textbox control gains focus
$(".water").focus(function() {
                $tb = $(this);
                if ($tb.val() == this.title) {
                    $tb.val("");
                    $tb.removeClass("water");
                }
            });
 
Similarly when the user moves focus to a different control without entering a value in the textbox, we add the watermark css again.
$(".water").blur(function() {
                $tb = $(this);
                if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }
            });
 
The water class declared in Demos.css looks like this:
.water
{
     font-family: Tahoma, Arial, sans-serif;
     font-size:75%;
     color:gray;
}
When the page loads for the first time, the watermark is visible as shown here:
Watermark
When the user enters the First/Last Name and submits the form, the watermark behavior is no more needed to be displayed. This is achieved by comparing the ‘title’ with the ‘value’ of the textbox. If the ‘value’ does not match the ‘title’, this indicates that the user has entered some value in the textboxes and submitted the form. So in this case we remove the watermark appearance.
$(".water").each(function() {
                $tb = $(this);
                if ($tb.val() != this.title) {
                    $tb.removeClass("water");
                }
            });
After the user enters the details and submits the form, the result is similar to the one shown here, without the watermark:
Watermark disappears
Thanks to Arnold Matusz for sharing the tip about the tooltip property. The code has been tested on IE 7, IE 8, Firefox 3, Chrome 2, Safari 4 browsers
You can see a Live Demo over here
I hope you found this article useful and I thank you for viewing it. This article was taken from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls which contains similar recipes that you can use in your applications. 
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Franky on Monday, December 7, 2009 10:01 AM
Hi
what append when you submit?  The watermark is send?
Comment posted by Suprotim Agarwal on Monday, December 7, 2009 11:38 AM
Franky: You can always do validation to check that. This article focuses on the watermark effect.
Comment posted by Sobin on Thursday, January 21, 2010 1:14 PM
Hi Suprotim,
Please test with these steps:
1)enter some text in the text boxes
2)click submit button
3)completely remove text from text boxes
4)water mark does not come back after post back!
Comment posted by Suprotim Agarwal on Tuesday, January 26, 2010 12:25 AM
Sobin: You can always add that functionality by taking this bit of code

if ($.trim($tb.val()) == "") {
                    $tb.val(this.title);
                    $tb.addClass("water");
                }

in a separate function and calling it on load
Comment posted by Sérgio on Tuesday, January 26, 2010 9:55 PM
I have read so many articles on asp.net watermark and I like this one the most. I better jump to jquery now. Thanks!
Comment posted by Thiago on Sunday, January 31, 2010 10:27 AM
Weird...
the way it is now, if you submit this form, your watermake text will be sent..
I'd put the watermark text in a resource file (so I could have culture based watermarks as well) and check if the value of the text box is not null or empty and not equal to the text on the resource file before the post..
Comment posted by Jie on Monday, February 1, 2010 12:26 PM
I don't know if this is good application from usabilily point of view. A Screen Ready software won't be able to "speek" the proper label for the each control. Just my 2c.
Comment posted by Sam on Monday, February 1, 2010 10:46 PM
Yes the watermark is submitted to the server. The missing piece of the puzzle is to bind each field to the submit event of it's form. Then on submit compare the value against the title and if it's the same clear it.

This would be better written as a plugin. I am sure there is one around already.
Comment posted by Rakesh on Wednesday, December 22, 2010 11:46 PM
There is Free Control Avilable Online for Watermarked Textbox

This tool helps to provide generate watermark in textbox in ASP.Net.

In this watermark will may be a text or image in behind of textbox.


Download from the following link.

http://worldcode.brinkster.net/Dot_Net_Tools/TextBoxWatermark.aspx

Comment posted by Alex Ubbink on Tuesday, July 12, 2011 7:00 AM
I really love this implementation of watermarking a textbox!
I have one improvement for the jquery script:
If you move the ".each" function to te bottom of the section (below .focus and .blur) the watermark function will work after a postback of the page.
Comment posted by Dorababu on Tuesday, August 16, 2011 3:23 AM
Instead of using the text as you have given i have given User Name and Password, but the effect is not applied why
Comment posted by ahmed samir on Thursday, August 18, 2011 4:56 AM
hello,
i found a littel bug on this trick
when u enter the same text on the text box and leaf the text box it will removed from the text box
Comment posted by Kapil Singh on Wednesday, November 16, 2011 5:09 AM
Hi,
Your article are really awesome.actually i was in search for some good articles on watermark functionality in textbox by jquery  and finally i got one.
The most important is the simplicity which will be very helpful for the beginners. Check following link too it might be useful for you.

http://mindstick.com/Blog/136/Using%20watermark%20functionality%20in%20textbox%20by%20JQuery

Thanks Everyone!!
Comment posted by Narayan on Wednesday, December 14, 2011 6:02 AM
Can you implement water marker in Password field?
Comment posted by sunil on Thursday, December 15, 2011 3:38 AM
Its a good example of water mark using Jquery.
Thanx a lot!!!!
Comment posted by Stanley on Wednesday, April 11, 2012 1:29 AM
Hi Congrats for your good snippets, atmost they are straight to the point!
Comment posted by Suprotim Agarwal on Thursday, April 12, 2012 8:16 AM
Thanks everyone for your comments. Glad you liked the solution!
Comment posted by Usman on Saturday, July 7, 2012 11:23 AM
Join this blog and get to know why hidden field is used in ASP.NET and also get free website development tutorials at home in ASP.NET.... http://dot-net-programmer.blogspot.com/2012/07/aspnet-hidden-field.html
Comment posted by Suchitra on Thursday, August 16, 2012 6:12 AM
Thank You for giving such generic solutions and with explanation. They work right the first time !!!
Comment posted by Thelma on Monday, August 20, 2012 1:48 PM
This was helpful
Comment posted by Reddy on Wednesday, September 19, 2012 12:44 AM
Watermark text is not greyed out after an async partial postback happens .. any ideas how to fix that?
Comment posted by Niranjan on Friday, September 6, 2013 5:38 AM
I have a educational software. I want to add equation editor for creating mathematical equations.in backend we are using ms Access, How could we add equation editor to it. it is a offline software.
Comment posted by vinay on Tuesday, July 22, 2014 6:14 AM
this is really nice article
http://www.aspdotnet-pools.com/2014/07/display-watermark-text-in-password.html

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel