C# 開發遮罩輸入文字框：客戶端腳本格式化與隱藏欄位回傳實值

遮罩輸入需求與現有方案分析

Visual FoxPro 內建遮罩文字框功能強大。Web 端現有方案（如 stedy.com）採用客戶端 VBScript 格式化：輸入時即時格式化顯示，失敗顯示錯誤訊息（如 # INVALID DATE ENTERED #）。

客戶端格式化函數範例（日期）

function maskDate(sValue, sType) {
    dim zMonth = array("January", "February", ...);
    if len(trim(sValue)) = 0 then maskDate = "" : setViewState false
    elseif not(isDate(sValue)) then maskDate = "# INVALID DATE ENTERED #" : setViewState true
    else
        select case sType
            case "medium": maskDate = day(...) & "-" & left(zMonth(month(...)-1),3) & "-" & year(...)
            case "long":   maskDate = zMonth(month(...)-1) & " " & day(...) & ", " & year(...)
            case else:     maskDate = formatDateTime(sValue, vbShortDate)
        end select
        setViewState false
    end if
end function

遮罩文字框兩個自訂屬性

• maskType：遮罩格式類型（日期、貨幣、SSN 等）
• realValue：未格式化的原始值（如 ¥30.00 → 30.00）

核心難題：如何將客戶端屬性回傳伺服器

解決方案：隱藏欄位儲存 realValue，表單送出時自動回傳。

Render 覆寫產生隱藏欄位

protected override void Render(HtmlTextWriter output) {
    // 隱藏欄位儲存真實值
    output.WriteBeginTag("input");
    output.WriteAttribute("type", "hidden");
    output.WriteAttribute("value", "");
    output.WriteAttribute("id", "__" + this.UniqueID);
    output.WriteAttribute("name", "__" + this.UniqueID);
    output.Write(HtmlTextWriter.TagRightChar);
    
    base.Render(output); // 輸出原本的文字框
}

後續實作方向

• 客戶端 JavaScript 取代 VBScript（跨瀏覽器相容）
• 即時輸入格式化（OnKeyPress/OnBlur）
• 伺服端屬性存取 realValue 隱藏欄位
• 支援多種遮罩類型：日期、貨幣、電話、郵遞區號、自訂正則