Atlas学习手记（13）：使用TextBoxWatermark为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>

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

　　用户输入：

本文作者:

---

« 
» 

---