时间戳

首页 > 解决方案 > 如何在每列中使用jquery计算特定字符的实时onkeyup？

jquery - 如何在每列中使用jquery计算特定字符的实时onkeyup？

问题描述

我得到了脚本来计算字符串行中的特定字符。这是70行数。但是每当我放入每个文本区域时。我计算相同的值。请看这里：https ://jsfiddle.net/nobuts/hp3t7kju/3/

$('.counter').on('keyup',function(){
var str=$('textarea').val();
var count = (str.match(/=/g) || []).length;
$(this).find('span').html(count);
});

标签： jquery

解决方案

你快到了。您需要找到textarea内部counter类使用this以获得不同的计数。否则，它首先采取textarea并给出相同的结果。

$('.counter').on('keyup',function(){
    var str=$(this).find('textarea').val();
    var count = (str.match(/=/g) || []).length;
    $(this).find('span').html(count);
});
.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-lg-4 counter">
      <strong>Input1</strong> <span class="text-danger"></span><br />
      <textarea name="input2a" rows="10" class="form-control" cols="5"></textarea><br />
    </div>
    <div class="col-lg-4 counter">
      <strong>Input2</strong> <span class="text-danger"></span><br />
      <textarea name="input3a" rows="10" class="form-control" cols="5"></textarea><br />
    </div>
    <div class="col-lg-4 counter">
      <strong>Input3</strong> <span class="text-danger"></span><br />
      <textarea name="input2b" rows="10" class="form-control" cols="5"></textarea><br />
    </div>
  </div>
</div>

推荐阅读