AJAX 控制項集之TextBoxWatermark(浮水印文字框)控制項

標籤：style   blog   http   color   使用   os   strong   2014   

功能：
       可以讓TextBox控制項初始化的時候擁有浮水印文字。
屬性：
    TargetControlID :要使用具有浮水印效果的TextBox控制項ID。
    WatermarkCssClass :指定浮水印文字的CSS樣式表。
    WatermarkText :顯示在TextBox控制項的浮水印文字內容。

代碼執行個體：

 

<asp:Panel ID="panIntTemp" runat="server" GroupingText="新增資料">    <table>        <tr>            <td>                姓名：            </td>            <td>                <asp:TextBox ID="txtIntName" runat="server"></asp:TextBox>                <ajaxToolkit:TextBoxWatermarkExtender ID="tbweTxtIntName" runat="server" TargetControlID="txtIntName"                    WatermarkCssClass="watermarked" WatermarkText="請在此處輸入姓名">                </ajaxToolkit:TextBoxWatermarkExtender>            </td>            <td>                性別：            </td>            <td>                <asp:TextBox ID="txtIntGender" runat="server"></asp:TextBox>                <ajaxToolkit:TextBoxWatermarkExtender ID="tbweTxtIntGender" runat="server" TargetControlID="txtIntGender"                    WatermarkText="請在此處輸入性別">                </ajaxToolkit:TextBoxWatermarkExtender>            </td>            <tr>                <td>                    出生日期：                </td>                <td>                    <asp:TextBox ID="txtIntBirthday" runat="server"></asp:TextBox>                    <ajaxToolkit:TextBoxWatermarkExtender ID="tbweTxtIntBirthday" runat="server" TargetControlID="txtIntBirthday"                        WatermarkCssClass="watermarked" WatermarkText="YYYYMMDD">                    </ajaxToolkit:TextBoxWatermarkExtender>                </td>                <td>                    家庭住址：                </td>                <td>                    <asp:TextBox ID="txtIntAddress" runat="server"></asp:TextBox>                    <ajaxToolkit:TextBoxWatermarkExtender ID="tbweTxtIntAddress" runat="server" TargetControlID="txtIntAddress"                        WatermarkText="請在此處輸入家庭住址">                    </ajaxToolkit:TextBoxWatermarkExtender>                </td>            </tr>    </table></asp:Panel>

View Code

運行：

姓名和出生日期是指定了浮水印文字的CSS樣式表顯示的效果。這在實際編程中非常實用。

如下：

結束：

本章主要介紹了TextBoxWatermarkExtender的用法。該組件的使用方法非常簡單，無需編寫任何代碼即可使用。或者有些朋友會覺 得，給TextBox設定一個預設值也能達到提示的作用。用預設值的方式只能設定簡單的文字，不能設定提示的樣式，而且當輸入內容然後再次清空後，該提 示語就不能再次出現了，除非使用js輔助。而用TextBoxWatermarkExtender則讓你用最快的速度，達到你想要的效果。