Atlas学习手记（13）：使用TextBoxWatermark为TextBox加上水印效果

TextBoxWatermark是AtlasControlToolkit中的一个Extender，它能够为ASP.NET中的TextBox加上水印效果，在用户还没有输入内容时可以显示一些提示信息给用户，这种效果在很多网站都有应用。

主要内容

1．TextBoxWatermark Extender介绍

2．完整示例

TextBoxWatermark是AtlasControlToolkit中的一个Extender，它能够为ASP.NET中的TextBox加上水印效果，在用户还没有输入内容时可以显示一些提示信息给用户，这种效果在很多网站都有应用。示例代码如下：

<atlasToolkit:TextBoxWatermarkExtender ID="TBWE2" 

    runat="server">

    <atlasToolkit:TextBoxWatermarkProperties

        TargetControlID="TextBox1"

        WatermarkText="Type First Name Here"

        WatermarkCssClass="watermarked" 

    </atlasToolkit:TextBoxWatermarkProperties>

</atlasToolkit:TextBoxWatermarkExtender>

它的属性很简单，如下表所示：

属性	说明
TargetControlID	目标TextBox的ID
WatermarkText	用户没有输入前显示的文字
WatermarkCssClass	用户没有输入前的CSS样式

二．完整示例

下面看一个完整的示例，新建一个Web Site后，在ASPX页面中顶部加入对AtlasControlToolkit

<%@ Register Assembly="AtlasControlToolkit" 

            Namespace="AtlasControlToolkit" 

            TagPrefix="atlasToolkit" %>

再定义两个CSS样式，分别作为TextBox的样式和加上水印效果的样式：

<style type="text/css">

    .unwatermarked {

        height:23px;

        width:148px;

        font-weight:bold;

    }

    .watermarked {

        height:23px;

        width:150px;

        padding:2px 0 0 2px;

        border:1px solid #BEBEBE;

        background-color:#F0F8FF;

        color:gray;

    }          

</style>

在页面中再添加两个TextBox控件，我们将对这两个TextBox控件添加水印效果：

<div>

    <h3>First name:

    <asp:TextBox ID="txt_FirstName" 

        CssClass="unwatermarked" Width="150" 

        runat="server"></asp:TextBox></h3>

    <h3>Last name:

    <asp:TextBox ID="txt_LastName" 

        CssClass="unwatermarked" Width="150" 

        runat="server"></asp:TextBox></h3>

</div>

现在就可以添加TextBoxWatermarkExtender了，分别指定参数如下：

<atlasToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server">

    <atlasToolkit:TextBoxWatermarkProperties 

        TargetControlID="txt_FirstName" 

        WatermarkText="Type First Name Here" 

        WatermarkCssClass="watermarked">

    </atlasToolkit:TextBoxWatermarkProperties>

    <atlasToolkit:TextBoxWatermarkProperties 

        TargetControlID="txt_LastName" 

        WatermarkText="Type Last Name Here" 

        WatermarkCssClass="watermarked">

    </atlasToolkit:TextBoxWatermarkProperties>

</atlasToolkit:TextBoxWatermarkExtender>

编译运行，就可以看到效果了

用户输入：

完整示例下载