AJAX Control Toolkit TextBoxWatermarkExtender 實作多行水印提示

功能介紹

TextBoxWatermarkExtender 是 AJAX Control Toolkit 提供的擴充控制項，能在 TextBox 為空時顯示灰色提示文字（水印），使用者點擊輸入時自動消失，無需撰寫任何 JavaScript。

基本用法

<asp:TextBox ID="txtCCEmail" runat="server" TextMode="MultiLine" Height="50" CssClass="textbox" Width="250"></asp:TextBox><br />
<ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender3" runat="server"
    TargetControlID="txtCCEmail"
    WatermarkText="sample1@yourcompany.com; sample2@yourcompany.com;"
    WatermarkCssClass="watermarked">
</ajaxToolkit:TextBoxWatermarkExtender>

關鍵屬性說明

CSS 樣式範例

.watermarked {
    color: #999;
    font-style: italic;
}

多行水印技巧

範例中 WatermarkText 使用分號分隔兩個 Email 範例，瀏覽器會自動在多行 TextBox 中換行顯示。若需更精確控制換行，可在字串中直接嵌入 \n（需在代碼後端指派）或使用 CSS white-space: pre-wrap。

常見問題與解決

• 水印不顯示：確認 ToolkitScriptManager 已放置頁面上，且 ajaxToolkit 命名空間正確註冊。
• PostBack 後水印消失：TextBox 若有值則不顯示水印，屬正常行為；若需強制顯示可在 Page_Load 清空 TextBox 值。
• 驗證器衝突：搭配 RequiredFieldValidator 時，水印文字不會被視為有效輸入，驗證邏輯不受影響。

現代替代方案

HTML5 原生支援 placeholder 屬性：

<asp:TextBox ID="txtEmail" runat="server" TextMode="MultiLine" placeholder="sample1@yourcompany.com; sample2@yourcompany.com;" />

若專案已棄用 AJAX Control Toolkit，建議改用原生 placeholder 或前端框架元件，減少相依性。