ASP.NET 仿騰訊微博輸入字數即時提示：TextArea 字元計數器實作

TextBox TextMode="MultiLine" 渲染為 <textarea>，但 MaxLength 屬性在瀏覽器端不生效。本文用 jQuery 計時器輪詢 解決滑鼠貼上/刪除無法觸發 keyup/keydown 的問題。

核心 JavaScript

<script src="Scripts/jquery.js"></script>
<script>
var timer;
function maxLimit() {
    var len = $.trim($("#txtContent").val()).length;
    if (len > 140) {
        $("#txtleft").text("已經超出");
        $("#LabelContent").text(len - 140);
    } else {
        $("#txtleft").text("還能輸入");
        $("#LabelContent").text(140 - len);
    }
}
function startTimer() {
    maxLimit();
    timer = setTimeout(startTimer, 10); // 10ms 輪詢
}
function stopTimer() { clearTimeout(timer); }

$(function() {
    $("#txtContent").focus(startTimer).blur(stopTimer);
});
</script>

ASPX 頁面

<asp:TextBox ID="txtContent" runat="server" TextMode="MultiLine" 
    Width="500px" Height="100px" MaxLength="140" />
<div>
    <span id="txtleft">還能輸入</span>
    <asp:Label ID="LabelContent" runat="server" ForeColor="Red" Text="140" />
    <span>個字符</span>
</div>

關鍵點

• focus 時啟動 setTimeout 遞迴輪詢，blur 時清除，效能影響極小。
• 輪詢間隔 10ms 平衡即時性與 CPU；現代瀏覽器可改用 input 事件 ($("#txtContent").on("input", maxLimit)) 完全取代輪詢。
• $.trim() 忽略首尾空白，視需求決定是否保留。

現代寫法 (HTML5 + jQuery)

$("#txtContent").on("input", function() {
    var len = this.value.length; // 原生 textarea 支援 input 事件
    // 更新提示...
});
// 並可直接在 textarea 加上 maxlength="140" 瀏覽器原生限制