簡介
TextBoxWatermark控件是一個用於TextBox的水印控件,就是在文本框輸入文字之前,文本框中有一些提示性的文字,並可以自定義CSS控制它的樣式,實際用處我感覺不是很大,但給用戶帶來了操作上的方便,也有很好的視覺效果.
重要屬性
TargetControlID:要應用水印效果的文本框的ID
WatermarkText:水印效果的提示文本
WatermarkCssClass:水印效果所采用的CSS樣式
示例
1 打開vs2005創建一個AJaxControlToolKit網站,命名為oec2003_TextBoxWatermark
2 打開默認的Default.ASPx頁,切換到設計視圖
3 添加兩個文本框和兩個TextBoxWatermark控件,如下圖
4 切換到代碼視圖,設置TextBoxWatermark控件的屬性,代碼如下
1
<AJaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" TargetControlID="TextBox2" WatermarkText="請輸入用戶名" WatermarkCSSClass="water1">
2 </AJaxToolkit:TextBoxWatermarkExtender>
3
4 </div>
5 <AJaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" WatermarkText="請輸入密碼" TargetControlID="TextBox1" WatermarkCSSClass="water2">
6 </AJaxToolkit:TextBoxWatermarkExtender>
5 添加CSS 如下
1<style type="text/CSS">
2 .water1
3
{
}{
4
height:20px;
5 width:150px;
6 padding:2px 0 0 2px;
7 border:1px solid #BEBEBE;
8 background-color:#F0F8FF;
9 color:red;
10
}
11
12 .water2
13 {}{
14
height:20px;
15 width:150px;
16 border:1px none #ffffcc;
17 background-color:#ccccff;
18 color:green;
19 }
20 </style>
這兒只是簡單地寫了點css ,大家也可以通過CSS寫出很漂亮的水印
保存設計,運行程序就能看到效果,當鼠標點擊文本框時水印消失,文本框中出現光標,鼠標離開後,水印再次出現.
