Asp.Net Ajax–TextBoxWateramrk控制項使用

文章目錄

• 簡介
• 重要屬性
• 樣本

簡介

TextBoxWatermark控制項是一個用於TextBox的浮水印控制項,就是在文字框輸入文字之前,文字框中有一些提示性的文字,並可以自訂css控制它的樣式,實際用處我感覺不是很大,但給使用者帶來了操作上的方便,也有很好的視覺效果。

重要屬性

TargetControlID:要應用浮水印效果的文字框的ID
WatermarkText:浮水印效果的提示文本 
WatermarkCssClass:浮水印效果所採用的CSS樣式

樣本

1 開啟vs2005建立一個AjaxControlToolKit網站,命名為oec2003_TextBoxWatermark
2 開啟預設的Default.aspx頁,切換到設計檢視
3 添加兩個文字框和兩個TextBoxWatermark控制項,如

4 切換到程式碼檢視,設定TextBoxWatermark控制項的屬性,代碼如下

<ajaxtoolkit:textboxwatermarkextender id="TextBoxWatermarkExtender1" runat="server"    targetcontrolid="TextBox2" watermarktext="請輸入使用者名稱" watermarkcssclass="water1">    </ajaxtoolkit:textboxwatermarkextender><ajaxtoolkit:textboxwatermarkextender id="TextBoxWatermarkExtender2" runat="server"    watermarktext="請輸入密碼" targetcontrolid="TextBox1" watermarkcssclass="water2">    </ajaxtoolkit:textboxwatermarkextender>

5 添加css 如下

<style type="text/css"> .water1 {     height:20px;     width:150px;     padding:2px 0 0 2px;     border:1px solid #BEBEBE;     background-color:#F0F8FF;     color:red;}.water2{    height:20px;    width:150px;    border:1px none #ffffcc;    background-color:#ccccff;    color:green;}</style>

這兒只是簡單地寫了點css ,大家也可以通過css寫出很漂亮的浮水印
儲存設計,運行程式就能看到效果,當滑鼠點擊文字框時浮水印消失,文字框中出現游標,滑鼠離開後,浮水印再次出現.