AJAX 控件集之TextBoxWatermark(水印文本框)控件

功能：
       能夠讓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則讓你用最快的速度，達到你想要的效果。