Ajax Toolkit 控制項學習系列(3) ——TextBoxWatermarkExtender

　　TextBoxWatermarkExtender這個控制項是對一個TextBox進行控制的，可以設定起Css改變樣式。比如開始的時候是一個樣子，輸入之後由一個樣子。資料之前，屬性控制預設的值，當游標點擊輸入的時候，開始顯示的內容消失，進行你的文本輸入。本例中使用2個TextBox用於對比使用。

　　不羅嗦，還是先看效果。

　　

　　開始，提示輸入使用者名稱。

　　當滑鼠點擊之後，提示資訊沒有了。可以自由輸入。

　　完成輸入，快顯視窗。

　　TextBoxWatermarkExtender 有兩個必要的屬性，就是TargetControlID，不用說，控制的是TextBox的ID。而WatermarkText是控制的提示資訊。

　　我們還可以通過WatermarkCssClass來控制TextBox的樣式。輸入之後會消失。

　　後台沒有代碼，前台代碼如下所示：　　

　　

<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="sm" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="tb_username" runat="server" Text=""></asp:TextBox>
<ajax:TextBoxWatermarkExtender ID="tbwe_username" runat="server" TargetControlID="tb_username"
                    WatermarkText="Input your username." WatermarkCssClass="textbox">
</ajax:TextBoxWatermarkExtender>
<br />
<asp:TextBox ID="tb_psd" runat="server" Text="" TextMode="Password"></asp:TextBox>
<br />
<asp:Button ID="btn_login" runat="server" Text="login" />
<ajax:ConfirmButtonExtender ID="cbe_btn" runat="server" TargetControlID="btn_login"
                    ConfirmText="Welcome!!">
</ajax:ConfirmButtonExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>