自訂數字輸入 TextBox 控制項實作（僅允許數字）

需求：在 GridView 中批量輸入純數字。解決方案：封裝一個繼承自 TextBox 的 NumberText 控制項，透過客戶端 JavaScript 攔截按鍵，僅允許數字鍵（鍵碼 48-57）與 Enter 鍵（13）。

核心程式碼

public class NumberText : TextBox {
    private const string SMB_NUMBER_SCRIPT_ID = "{c4f7dcfd-8f9b-4fe8-8bd1-4a8a1f145c0c}";
    private const string SMB_NUMBER_SCRIPT_ONLY_HOOK = "return NumberEditor_KeyPress_Handle(this)";
    private const string SMB_NUMBER_SCRIPT_ONLY_SCRIPT = @"<script language=""javascript"">
function NumberEditor_KeyPress_Handle(ctrl) {
    if(event.keyCode == 13) return true;
    if(event.keyCode < 48 || event.keyCode > 57) return false;
    return true;
}
</script>";

    private void RenderJavscript() {
        if (!Page.ClientScript.IsClientScriptBlockRegistered(SMB_NUMBER_SCRIPT_ID)) {
            Page.ClientScript.RegisterClientScriptBlock(Page.GetType(), SMB_NUMBER_SCRIPT_ID, 
                string.Format(SMB_NUMBER_SCRIPT_ONLY_SCRIPT, base.ID));
        }
    }

    protected override void AddAttributesToRender(HtmlTextWriter writer) {
        base.AddAttributesToRender(writer);
        writer.AddAttribute("OnKeyPress", SMB_NUMBER_SCRIPT_ONLY_HOOK);
    }

    protected override void OnPreRender(EventArgs e) {
        base.OnPreRender(e);
        RenderJavscript();
    }
}

運作說明

1. RenderJavscript 確保腳本區塊僅註冊一次。
2. AddAttributesToRender 為輸出的 <input> 元素加上 onkeypress 事件綁定。
3. OnPreRender 階段注入腳本，確保在頁面呈現前完成。

將此控制項加入工具箱後，即可像普通 TextBox 一樣拖放使用，自動具備純數字輸入限制功能。