使用foreach循环生成的多textarea实现独立字符计数问题

问题根源 #

你的代码存在三个核心问题：

• HTML中重复使用了id="char-count"和id="current"，页面内id必须唯一，重复id会导致JS无法精准定位元素
• jQuery选择器$("#desc")只能匹配第一个id为desc的元素，无法选中循环生成的多个textarea
• 事件处理中直接修改所有#current元素，导致所有计数同步变化，无法独立

步骤1：修正C#生成的HTML结构 #

将重复的id改为class，同时给textarea统一添加类名方便选择：

List<Document> record= _repository.Document.GetChecklist(entity.checklist, Convert.ToInt32(entity.ref)).ToList();

if (record.Count() > 0)
{
    int i = 0;

    foreach (var r in record)
    {   
        _html.Append("<tr>");
        _html.Append("<td style=\"padding-left:20px\" class=\"td-control\">" +
                      "<textarea cols=\"50\" rows=\"5\" maxlength=\"1000\" id=\"desc" + i + "\" class=\"desc-textarea\">" + 
                      (String.IsNullOrEmpty(r.desc) ? "" : r.desc.ToString().Trim()) + 
                      "</textarea>" +
                      "<div class=\"char-count\">" +
                      "<span class=\"current\">0</span><span>/ 1000</span></div></td>");
        _html.Append("</tr>");
        i++;
    }
}    

步骤2：更新CSS选择器 #

因为id改为了class，同步修改CSS：

.char-count
{
    float: right;
    padding: 0.1rem 0 0 0;
    font-size: 0.875rem;
}

步骤3：编写正确的jQuery代码 #

绑定所有textarea的输入事件（包含键盘输入、粘贴等操作），并精准定位对应的计数元素：

// 页面加载完成后执行
$(function() {
    // 初始化：设置所有textarea的初始字符数
    $(".desc-textarea").each(function() {
        var count = $(this).val().length;
        $(this).next(".char-count").find(".current").text(count);
    });

    // 绑定输入事件（keyup+input覆盖所有输入场景）
    $(".desc-textarea").on("keyup input", function() {
        var characterCount = $(this).val().length;
        // 找到当前textarea对应的计数元素
        var currentCount = $(this).next(".char-count").find(".current");
        currentCount.text(characterCount);
    });
});

关键说明 #

• 使用class替代重复的id，确保每个元素能被独立定位
• 用next(".char-count")获取当前textarea紧邻的计数容器，再通过find(".current")找到具体的计数标签，实现一对一关联
• 同时绑定keyup和input事件，覆盖键盘输入、鼠标粘贴、右键粘贴等所有文本修改场景
• 初始化时执行一次计数设置，确保已有内容的textarea能正确显示初始字符数

内容的提问来源于stack exchange，提问作者Jhonn Matthew Calvelo