Question

我的页面中有很多输入和一个textarea。我想要统计所有人物这些输入/ textarea。

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);
});

喜欢......如果我在textarea写“abc”，如果我在两个输入中都写“abc”，它会显示“151 restantes”。

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

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

我可以做些什么来计算每个元素（textarea和输入）？

Answer 1

事件方法将分别为每个输入附加事件处理程序。因此$(this).val().length指的是触发事件的特定输入。

如果您必须调用从所有输入读取的方法。

$(document).on('keyup', 'textarea, input', countChars);

function countChars() {
  var total = 0;
  $('textarea, input').each(function(i, el) {
    total += el.value.length
  });
  var remaining = 160 - total;
  $('span').text(remaining + ' remaining');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<input type="text" />
<input type="text" />
<span></span>

Answer 2

您可以使用Error: Main method is not static in class FirstMethod, please define the main method as:public static void main(String[] args)函数枚举.txtArea中的所有字符：

.each

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

Answer 3

试试这个解决方案，这将读取类 txtArea 的所有元素，并计算每个元素的字符数。通过这种方式，您将获得总字符数。

<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" />

JS

$(document).on("input keyup", ".txtArea", function () {
var limit = 160;
   var count = 0;
   var inputElements = $(".txtArea").each(function(){
       count += $(this).val().length;
   });
 $(".caracteres").text(limit - count);
});

Answer 4

用于计算所有输入/ textarea字段中的所有字符。

HTML

jQuery.validator.addMethod("custom-rule", function(value, element) {
    return this.optional(element) || /^[\w-]+$/i.test(value);
    // here add dash in character class-^^^^-----
}, "Letters, numbers, dashes and underscores only please");

脚本

<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>

Answer 5

您只需遍历所有输入元素并使用length计算每个输入输入的字符数。

其次，我建议使用input事件代替keyup或keydown，因为input负责所有事情（甚至是复制粘贴）。以下是更新的代码段：

＆＃13;

$(document).on('input', 'textarea, input', countChar);

function countChar() {
  var len = 0;
  $('input,textarea').each(function() {
    var enteredValue = $(this).val();
    len += enteredValue.length;
    $('#charCount').text(len);
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea></textarea>
<input type="text" />
<input type="text" />
<span id='charCount'></span>

＆＃13;

仅在一个textarea中计算的字符

5 个答案: