TextBoxWatermarkExtender Control In Ajax

TextBoxWatermark is an ASP.NET AJAX extender that can be attached to an ASP.NET TextBox control to get "watermark" behaviour. 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.
TextBoxWatermarkExtender Properties:-
1.TargetControlID :- The ID of the TextBox to operate on
2.WatermarkText: - The text to show when the control has no value
3.WatermarkCssClass :- The CSS class to apply to the TextBox when it has no value .


Ex:-
<style type="text/css">
 .TextBoxWatermark
 {
 background-color: lightgray; color: GrayText;
}
 </style>
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<table>
 <tr>
 <td><b>First Name: </b></td>
 <td>
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
<asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="txtFirstName" WatermarkText="Enter First Name" WatermarkCssClass="TextBoxWatermark">
 </asp:TextBoxWatermarkExtender>
</td>
 </tr>
 <tr>
 <td><b>Last Name:</b>
</td>
<td>
 <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
 <asp:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" TargetControlID="txtLastName" WatermarkText="Enter Last Name" WatermarkCssClass="TextBoxWatermark">
 </asp:TextBoxWatermarkExtender>
 </td>
 </tr>
</table>
<br />
 <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
 </div>

Output:-


No comments:

Post a Comment