为 textarea 最近字段计数字符答案

【问题标题】：Count character for textarea closest field为 textarea 最近字段计数字符
【发布时间】：2021-05-23 17:16:57
【问题描述】：

我的页面上有 4-5 个文本区域，并且我设置了字符的限制。用户可以添加 500 个字符。

现在我的问题是，我必须显示最近字段的字符数。截至目前，它正在向所有人展示。我的意思是，如果我在第一个 textarea 中添加任何内容，则计算所有 textarea 的显示。

请查看下图。

我正在尝试这样的事情

  current = $(this).closest('.row .valInfo').find('.currentchar'),
  maximum = $(this).closest('.valInfo').find('.maximumchar'),
  //theCount = $('.valInfo');
  theCount = $(this).closest('.valInfo')

$('.characterCount').keyup(function() {
    var characterCount = $(this).val().length,
      current = $('.currentchar'),
      maximum = $('.maximumchar'),
      theCount = $('.valInfo');
    current.text(characterCount);
  }

);

<div class="row">
  <div class="col-lg-6">
    <textarea maxlength="500" class="characterCount"></textarea>
    <div class="valInfo"><span class="currentchar">0</span> <span class="maximumchar">/ 500</span> Characters</div>
  </div>
  <div class="col-lg-6">
    <textarea maxlength="500" class="characterCount"></textarea>
    <div class="valInfo"><span class="currentchar">0</span> <span class="maximumchar">/ 500</span> Characters</div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【问题讨论】：

你可以在伪元素之后使用数据属性和css来做到这一点。会更短
@MisterJojo，你能分享我可以学习这个的例子或任何链接吗？
好的，让我几分钟
对不起，我错了，textarea 元素不能使用伪元素。但是可以通过使用内容可编辑属性的 div 来做到这一点
@MisterJojo，我认为没问题，在这种情况下，脚本很好。

标签： javascript html jquery

【解决方案1】：

您想找到与已编辑元素相对应的currentchar、maximumchar 和valinfo 元素。例如，仅在共享父项中查找匹配元素：

$('.characterCount').keyup(function() {
    var elem = $(this),
      characterCount = elem.val().length;
      current = elem.parent().find('.currentchar'),
      maximum = elem.parent().find('.maximumchar'),
      theCount = elem.parent().find('.valInfo');
    current.text(characterCount);
  }

);

<div class="row">
  <div class="col-lg-6">
    <textarea maxlength="500" class="characterCount"></textarea>
    <div class="valInfo"><span class="currentchar">0</span> <span class="maximumchar">/ 500</span> Characters</div>
  </div>
  <div class="col-lg-6">
    <textarea maxlength="500" class="characterCount"></textarea>
    <div class="valInfo"><span class="currentchar">0</span> <span class="maximumchar">/ 500</span> Characters</div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【讨论】：

是的，它按预期工作。谢谢你的快速反应。为我的尺码点赞。