Thursday, November 05, 2009

Creating a text box water mark extender

The textboxwatermark extender is a nice little AJAX function that enhances the user experience. The main idea is that a "watermark" can be placed in a text box to give the user some direction about what they need to do in that text box. Once the user clicks inside of the text box the watermark disappers.

Follow these steps to add a textboxwatermark extender:

1. Create the text box.
<asp:TextBox ID="txtSearch" runat="server" CssClass="textbox" Width="160px"></asp:TextBox>

2. Create the textboxwatermark extender.
<cc1:TextBoxWatermarkExtender ID="tbweSearch" runat="server" TargetControlID="txtSearch" WatermarkText="Enter package name" WatermarkCssClass="watermarked" />

The three important parameters are:

          a. TargetControlID - Put the name of the text box here.
          b. WatermarkText - Place the text box directions here.
          c. WatermarkCssClass - Put the name of the css class the watermark should use here.

No comments: