ASP.NET 即時顯示 TextBox 輸入字數

實作目標

多行文字方塊輸入時，即時於旁顯示目前字數，協助使用者掌握輸入長度。

前端 HTML 與 JavaScript

<script type="text/javascript">
function countNum() {
    var txt = document.getElementById("txtText");
    var lbl = document.getElementById("lblCount");
    if (txt && lbl) {
        lbl.value = txt.value.length;
    }
}
</script>

<asp:TextBox ID="txtText" runat="server" TextMode="MultiLine" 
    Columns="80" Rows="8" Width="650px" Height="150px"
    onkeydown="countNum();" onkeyup="countNum;" 
    onmousemove="countNum();" onmouseout="countNum();"></asp:TextBox>

（已輸入 <input id="lblCount" type="button" style="border:none;background:none;" value="0" /> 字）

事件說明

綁定多種事件確保貼上、拖曳、輸入法等情況都能即時更新。

進階建議

• 改用 <span id="lblCount"></span> 而非 input，避免被誤以為可編輯。
• 搭配 maxlength 屬性限制最大長度（HTML5 支援 TextArea）。
• 若需統計「字元」而非「字節」，直接用 .length；若需區分中英字元寬度，需自行演算。

完整範例（含限制長度）

<textarea id="txtText" maxlength="500" oninput="countNum();"></textarea>
<span id="lblCount">0</span> / 500 字

<script>
function countNum() {
    var t = document.getElementById('txtText');
    var c = document.getElementById('lblCount');
    c.textContent = t.value.length;
    if (t.value.length > 500) t.value = t.value.substr(0, 500);
}
</script>