javascript - 仅在一个文本区域中计算字符

Question

我的页面中有很多输入和一个文本区域。我想计算所有字符 这些输入/文本区域。

HTML:

<textarea name="texto_envio" class="form-control txtArea" maxlength="160"></textarea>
<input type="text"maxlength=3" class="form-control txtArea" />
<input type="text"maxlength=3" class="form-control txtArea" />
<span class="caracteres">160</span> restantes<br>

JS:

$(document).on("input keyup", ".txtArea", function () {
    var limite = 160;
    var caracteresDigitados = $(this).val().length;
    var caracteresRestantes = limite - caracteresDigitados;
    $(".caracteres").text(caracteresRestantes);
});

比如...如果我在文本区域中写“abc”并且在两个输入中都写“abc”，它将显示“151 restantes”。

我在上面尝试了这段代码，但它只计算了我正在写入的元素。我在文本区域中写了“abc”，然后 span 显示“157 restantes”。在 textarea 中写有“abc”，我也在其中一个输入中写了“abc”。但跨度向我显示“157 restantes”。

当我在另一个元素中写入时，Span 正在重置。

我该怎么做才能让它计算每个元素(文本区域和输入)？

Answer 1

您可以使用.each 函数枚举.txtArea 中的所有字符:

$('.txtArea').on("keyup", function() {
  var limite = 160;
  $('.txtArea').each(function() {
    limite -= $(this).val().length
    $(".caracteres").text(limite);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="texto_envio" class="form-control txtArea" maxlength="160"></textarea>
<input type="text" maxlength=3 " class="form-control txtArea " />
<input type="text "maxlength=3" class="form-control txtArea" />
<span class="caracteres">160</span> restantes<br>