Home / AJAX

HOW TO Use the TextBoxWatermark Control

RSS
Modified on 2009/12/24 04:00 by Chris Muench Categorized as Uncategorized

WatermarkTextBox Demonstration



WatermarkTextBox Description

TextBoxWatermark is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to get "watermark" behavior. When a watermarked TextBox is empty, it displays a message to the user with a custom CSS style. Once the user has typed some text into the TextBox, the watermarked appearance goes away. The typical purpose of a watermark is to provide more information to the user about the TextBox itself without cluttering up the rest of the page.

Video - How Do I: Use the ASP.NET AJAX WatermarkTextBox Control?

WatermarkTextBox Client Code Sample

<!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 runat="server"> <title>Untitled Page</title> <style type="text/css"> .wm { color: Gray } </style> <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script> <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script> <script type="text/javascript"> Sys.require(Sys.components.watermark, function() { $("#name").watermark("<enter a name>", "wm"); }); </script> </head> <body>

<input type="text" id="name" size="50" /> </body> </html>


WatermarkTextBox Client Properties

WatermarkTextBox Server Code Sample

        <div class="demoheading">TextBoxWatermark Demonstration</div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                First name:
                <asp:TextBox ID="TextBox1" CssClass="unwatermarked" Width="150" runat="server" /><br />
                <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"
                    TargetControlID="TextBox1"
                    WatermarkText="Type First Name Here"
                    WatermarkCssClass="watermarked" />
            
                Last name:
                <asp:TextBox ID="TextBox2" CssClass="unwatermarked" Width="150" runat="server" /><br /><br />
                <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server"
                    TargetControlID="TextBox2"
                    WatermarkText="Type Last Name Here"
                    WatermarkCssClass="watermarked" />
            
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Submit" />
                <br /><br />
                <asp:Label ID="Label1" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>

WatermarkTextBox Server Properties

The properties in italics are optional.

<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
    TargetControlID="TextBox1"
    WatermarkText="Type First Name Here"
    WatermarkCssClass="watermarked" />
  • TargetControlID - The ID of the TextBox to operate on
  • WatermarkText - The text to show when the control has no value
  • WatermarkCssClass - The CSS class to apply to the TextBox when it has no value (e.g. the watermark text is shown).

WatermarkTextBox Additional Code Samples