The Microsoft Ajax Control Toolkit (ACT) contains a TextBox Watermark control.

I did a sample and video HERE.

I’ve started to write samples to implement all the ACT features with jQuery (and jQuery plugins), you can read more HERE.

Here is the effect we’re looking for, a hint to the user as to the desired or required input (note this sampe doesn’t do input validation, we’ll do that in a later demo.)

To get this we’re going to use jQuery and the TinyWatermark jQuery plugin.

The effect is completely applied in our markup. There is no server side implementation.

I like this as I prefer to off load as much work as possible to the client machine.


<%@ Page Title='Home Page' Language='C#' MasterPageFile='~/Site.master'
                 AutoEventWireup='true' CodeFile='Default.aspx.cs' 
 Inherits='_Default' %>
<asp:Content ID='HeaderContent' runat='server' 
             ContentPlaceHolderID='HeadContent'>
    <script src='Scripts/jquery-1.4.1-vsdoc.js' type='text/javascript'>
</script>
    <script src='Scripts/jquery_tinywatermark-3_1_0.js' 
        type='text/javascript'>
    </script>
    <style>
        .watermark
        {
        color:#999;
        background-color: #FFD4D4;
        font-style: italic;
        }
    </style>
    <script type='text/JavaScript'>
        jQuery(function ($) {
            $('.watermarked').watermark('watermark');
        });
    </script>
</asp:Content>
<asp:Content ID='BodyContent' runat='server' 
             ContentPlaceHolderID='MainContent'>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <p>
        To learn more about ASP.NET visit
        <a href='http://www.asp.net' 
		   title='ASP.NET Website'>www.asp.net</a>.
    </p>
    <p>
        Please enter your email address here ......<br />
        <input type='text' class='watermarked' size='50'
                  title='Enter Email Address here...' />
    </p>
</asp:Content>

Note that in the “HeadContent” placeholder I pull in jQuery and the TinyWatermark jQuery Plugin. (I’m using the VSDOC version for the best experience in Visual Studio but you should use the MIN version in production, and consider using the Microsoft CDN

Starting on line 7 I specify a style to be used for the watermark (and names .watermark)

Any texbox that I want to be watermarked I set it’s class=watermark

Note also that the jQuery plugin will use the title attribute as the text to displain in the textbox when the watermark is active as set on line 31.

Then all we have to do is simple apply the JavaScrpt function that begins on line 16.

You can download a runnable sample [ HERE ]