Tuesday, 25 June 2013

HOW TO Use the TextBoxWatermark Control

 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.

<!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>









        <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>







<ajaxToolkit:TextBoxWatermarkExtender ID="TBWE2" runat="server"
    TargetControlID="TextBox1"
    WatermarkText="Type First Name Here"
    WatermarkCssClass="watermarked" />


No comments:

Post a Comment