如何优化jQuery脚本实现多ASP.NET多行文本框字符计数？

你现在遇到的问题我太懂了——手动给每个文本框写绑定代码简直是重复劳动，尤其是数量多的时候，完全没必要。下面给你两种优化思路，都是不用逐个配置ID就能搞定的：

方案一：利用统一CSS类+固定命名规则的反馈容器 #

这个方案适合你已经手动写了反馈div的情况，只要给文本框加统一的类，再让反馈div的ID和文本框ID保持“文本框ID+_feedback”的对应关系就行。

第一步：修改ASP.NET控件代码 #

给所有需要统计的多行文本框加上统一的CssClass，同时确保反馈div的ID是文本框客户端ID加上_feedback（避免母版页/命名容器导致ID变化）：

<!-- 示例文本框 -->
<asp:TextBox ID="TextBox585" runat="server" Width="99%" TextMode="MultiLine" 
             CssClass="char-count-input" ToolTip="blabla"></asp:TextBox>
<br />
<!-- 用ClientID确保ID匹配 -->
<div id="<%= TextBox585.ClientID %>_feedback" style="text-align: right; font-size: 0.8em;"></div>

<!-- 其他文本框同理 -->
<asp:TextBox ID="TextBox123" runat="server" Width="99%" TextMode="MultiLine" 
             CssClass="char-count-input" ToolTip="another tip"></asp:TextBox>
<br />
<div id="<%= TextBox123.ClientID %>_feedback" style="text-align: right; font-size: 0.8em;"></div>

第二步：编写批量处理的jQuery脚本 #

这个脚本会自动遍历所有带char-count-input类的文本框，绑定事件并更新对应的反馈容器：

$(document).ready(function() {
    // 遍历所有需要统计的文本框
    $('.char-count-input').each(function() {
        const $input = $(this);
        // 匹配对应的反馈容器
        const feedbackId = $input.attr('id') + '_feedback';
        const $feedback = $('#' + feedbackId);

        // 定义更新字符数的函数
        function updateCharCount() {
            const charCount = $input.val().length;
            $feedback.text(`已输入 ${charCount} 个字符`);
            
            // 可选：加上字数限制提示
            // const maxChars = 500;
            // if (charCount > maxChars) {
            //     $feedback.addClass('text-danger').text(`已超出限制！当前 ${charCount}/${maxChars} 个字符`);
            // } else {
            //     $feedback.removeClass('text-danger').text(`已输入 ${charCount}/${maxChars} 个字符`);
            // }
        }

        // 页面加载时初始化显示
        updateCharCount();
        // 绑定输入相关事件，实时更新
        $input.on('input keyup paste', updateCharCount);
    });
});

方案二：动态生成反馈容器（更省心） #

如果不想手动写每个反馈div，这个方案会自动在每个文本框后面插入反馈元素，完全不用管ID匹配的问题：

第一步：简化ASP.NET控件代码 #

只要给文本框加统一的CssClass就行，不用写反馈div：

<asp:TextBox ID="TextBox585" runat="server" Width="99%" TextMode="MultiLine" 
             CssClass="char-count-input" ToolTip="blabla"></asp:TextBox><br />

<asp:TextBox ID="TextBox123" runat="server" Width="99%" TextMode="MultiLine" 
             CssClass="char-count-input" ToolTip="another tip"></asp:TextBox><br />

第二步：编写自动生成反馈的jQuery脚本 #

$(document).ready(function() {
    $('.char-count-input').each(function() {
        const $input = $(this);
        // 动态创建反馈div并插入到<br>标签后面
        const $feedback = $('<div>', {
            'class': 'char-count-feedback',
            'style': 'text-align: right; font-size: 0.8em;'
        }).insertAfter($input.next('br'));

        function updateCharCount() {
            const charCount = $input.val().length;
            $feedback.text(`已输入 ${charCount} 个字符`);
        }

        updateCharCount();
        $input.on('input keyup paste', updateCharCount);
    });
});

额外提示 #

• 如果不想用CssClass，也可以直接用属性选择器选中所有多行文本框：$('textarea')，但这样会选中页面上所有textarea，可能包括不需要统计的，所以还是加类更精准。
• 关于ASP.NET的客户端ID：如果你的文本框在母版页或者用户控件里，服务器端ID会被自动修改，这时候用<%= TextBoxID.ClientID %>生成反馈div的ID，或者用方案二动态生成，都能避免ID不匹配的问题。

内容的提问来源于stack exchange，提问作者L.Johnson