ASP.NET Web Forms TextBox 控制項完整指南：文字輸入、密碼、多行、AutoPostBack 即時回傳與驗證整合

TextBox 是 Web Forms 最常用的使用者輸入控制項，支援單行文字、密碼、多行文字三種模式，配合 AutoPostBack 實現即時伺服器驗證、自動完成、動態計算等豐富互動體驗。

TextBox 三種模式與核心屬性

通用核心屬性

<asp:TextBox ID="txtInput" runat="server"
    Text=""                    <-- 初始/目前值
    TextMode="Single"          <-- Single | Password | MultiLine
    Columns="30"               <-- 顯示寬度（字元數）
    Rows="5"                   <-- 多行模式高度（列數）
    MaxLength="100"            <-- 最大輸入長度（單行/密碼有效）
    Wrap="true"                <-- 多行自動換行
    ReadOnly="false"           <-- 唯讀（仍回傳值）
    Enabled="true"             <-- 啟用/停用
    AutoPostBack="false"       <-- 失焦/變更時自動 PostBack
    OnTextChanged="..."        <-- 文字變更伺服器事件
    CssClass="form-control"    <-- CSS 樣式
    ValidationGroup="vg1"      <-- 驗證群組
    CausesValidation="true"    <-- 觸發驗證
/>

完整範例：各模式展示

<form runat="server">
    <div class="form-group">
        <label>基本文字方塊：</label>
        <asp:TextBox ID="txtBasic" runat="server" />
    </div>
    
    <div class="form-group">
        <label>密碼方塊：</label>
        <asp:TextBox ID="txtPassword" TextMode="Password" runat="server" />
    </div>
    
    <div class="form-group">
        <label>預設值：</label>
        <asp:TextBox ID="txtWithValue" Text="Hello World!" runat="server" />
    </div>
    
    <div class="form-group">
        <label>多行文字區域：</label>
        <asp:TextBox ID="txtMulti" TextMode="MultiLine" Rows="4" Columns="50" runat="server" />
    </div>
    
    <div class="form-group">
        <label>固定高度多行：</label>
        <asp:TextBox ID="txtFixedHeight" TextMode="MultiLine" Rows="5" runat="server" />
    </div>
    
    <div class="form-group">
        <label>固定寬度：</label>
        <asp:TextBox ID="txtWidth" Columns="30" runat="server" />
    </div>
</form>

AutoPostBack 即時回傳：TextChanged 事件

應用場景

• 即時驗證帳號/Email 是否已註冊
• 依下拉選單選項動態顯示/隱藏欄位
• 購物車數量變更即時計算總價
• 搜尋建議自動完成

完整實作

<form runat="server">
    <div>
        <label>輸入姓名（失焦即時回傳）：</label>
        <asp:TextBox ID="txtName" runat="server" 
            Text="預設文字"
            AutoPostBack="true"
            OnTextChanged="txtName_TextChanged" />
    </div>
    <br />
    <asp:Label ID="lblMessage" runat="server" ForeColor="Blue" Font-Bold="true" />
</form>

<script runat="server">
    protected void txtName_TextChanged(object sender, EventArgs e) {
        lblMessage.Text = "您剛剛將文字變更為：" + txtName.Text + "（伺服器端處理於 " + DateTime.Now.ToLongTimeString() + "）";
    }
</script>

關鍵點

• AutoPostBack="true"：使用者修改文字後，**離開焦點（Tab/點擊其他處）或按 Enter** 觸發 PostBack
• OnTextChanged：對應伺服器端事件處理函數，簽章 void Method(object sender, EventArgs e)
• 配合 UpdatePanel 可實現局部更新，避免整頁閃爍

Button Click 事件中存取 TextBox 值

<form runat="server">
    <div>
        <label>姓名：</label>
        <asp:TextBox ID="txtName" runat="server" />
    </div>
    <asp:Button ID="btnSubmit" Text="送出" runat="server" OnClick="btnSubmit_Click" />
    <br /><br />
    <asp:Label ID="lblResult" runat="server" />
</form>

<script runat="server">
    protected void btnSubmit_Click(object sender, EventArgs e) {
        lblResult.Text = "您的姓名：" + txtName.Text;
    }
</script>

TextBox 與驗證控制項整合

<form runat="server">
    <div>
        <label>Email：</label>
        <asp:TextBox ID="txtEmail" runat="server" ValidationGroup="vgForm" />
        <asp:RequiredFieldValidator ID="rfvEmail" ControlToValidate="txtEmail" 
            ErrorMessage="Email 必填" ValidationGroup="vgForm" runat="server" />
        <asp:RegularExpressionValidator ID="revEmail" ControlToValidate="txtEmail"
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
            ErrorMessage="Email 格式錯誤" ValidationGroup="vgForm" runat="server" />
    </div>
    <asp:Button ID="btnSubmit" Text="註冊" ValidationGroup="vgForm" runat="server" OnClick="btnSubmit_Click" />
    <asp:ValidationSummary ID="vs" ValidationGroup="vgForm" runat="server" />
</form>

進階技巧與最佳實務

1. 密碼強度即時檢測

<asp:TextBox ID="txtPwd" TextMode="Password" runat="server" 
    AutoPostBack="true" OnTextChanged="txtPwd_TextChanged" />
<asp:Label ID="lblPwdStrength" runat="server" />

<script runat="server">
    protected void txtPwd_TextChanged(object sender, EventArgs e) {
        string pwd = txtPwd.Text;
        int score = 0;
        if (pwd.Length >= 8) score++;
        if (Regex.IsMatch(pwd, @"[A-Z]")) score++;
        if (Regex.IsMatch(pwd, @"[a-z]")) score++;
        if (Regex.IsMatch(pwd, @"\d")) score++;
        if (Regex.IsMatch(pwd, @"[!@#$%^&*]")) score++;
        
        string[] levels = { "極弱", "弱", "中等", "強", "極強" };
        lblPwdStrength.Text = "密碼強度：" + levels[Math.Min(score, 4)];
        lblPwdStrength.ForeColor = score >= 3 ? System.Drawing.Color.Green : System.Drawing.Color.Red;
    }
</script>

2. 數值輸入限制（僅允許數字）

<asp:TextBox ID="txtNumber" runat="server" 
    OnClientClick="return /^\d*$/.test(this.value);" />

或使用 RegularExpressionValidator ValidationExpression="^\d+$"

3. 多行文字計數器

<asp:TextBox ID="txtContent" TextMode="MultiLine" Rows="10" Columns="60" 
    runat="server" AutoPostBack="true" OnTextChanged="txtContent_TextChanged" />
<asp:Label ID="lblCharCount" runat="server" />

<script runat="server">
    protected void txtContent_TextChanged(object sender, EventArgs e) {
        lblCharCount.Text = "字元數：" + txtContent.Text.Length + " / 最大 500";
        if (txtContent.Text.Length > 500) lblCharCount.ForeColor = System.Drawing.Color.Red;
    }
</script>

TextBox vs HtmlInputText vs HtmlTextArea

常見問題排查

• TextChanged 不觸發：AutoPostBack="true" 未設定、ReadOnly="true" 或 Enabled="false"、驗證失敗阻擋 PostBack
• 密碼模式顯示明文：瀏覽器自動填入、開發者工具修改 type、TextMode="Password" 拼寫錯誤
• 多行文字換行不保存：資料庫欄位型別需支援換行（nvarchar、text），顯示時用 Text.Replace("\n", "<br/>") 或 CSS white-space: pre-wrap
• MaxLength 不生效於 MultiLine：HTML textarea 原生不支援 maxlength（HTML5 支援），需伺服器端驗證或 JavaScript 限制
• 中文輸入法組合字元問題：TextChanged 在組合過程可能多次觸發，建議按鈕送出時才處理關鍵邏輯

TextBox 透過三種模式涵蓋絕大多數文字輸入需求，配合 AutoPostBack 與驗證控制項，能建構出豐富且使用者友善的表單互動體驗。下一節將介紹 ViewState 視圖狀態管理機制。