如何使用jQuery对多个Textareas进行字数统计?

时间:2015-04-02 01:05:51

标签: javascript jquery html word-count

我使用以下JS成功对文本区域进行了字数统计:

   jQuery('span.after-amount').append(' - You have <span class="wordcount">0</span> words.'); 

   jQuery('textarea').on('input', function($) {

      var regex = /\s+/gi;
      var count =  jQuery(this).val().trim().replace(regex, ' ').split(" ").length;

      $('.wordcount').html(count);


    });

我的HTML:

<textarea class="tmcp-field tmcp-textarea" name="tmcp_textarea_2"></textarea>
<span class="after-amount">You have <span class="wordcount">0</span> words.</span>

<textarea class="tmcp-field tmcp-textarea" name="tmcp_textarea_2"></textarea>
<span class="after-amount">You have <span class="wordcount">0</span> words.</span>

<textarea class="tmcp-field tmcp-textarea" name="tmcp_textarea_2"></textarea>
<span class="after-amount">You have <span class="wordcount">0</span> words.</span>

这是Fiddle

我需要为每个文本区域获取字数,是否有一种简单的方法可以在不单独选择每个文本区域的情况下执行此操作?

2 个答案:

答案 0 :(得分:1)

这是我的解决方案,首先我将您的事件处理程序更改为keyup,并使用$(this)开始计算每个textarea值的长度,以便获得当前的textarea。

$(function(){
   $('textarea').on('keyup', function(){
      var wordsLength = $(this).val().length;
      $(this).next().find('.wordcount').html(wordsLength);
   });
});

检查updated jsfiddle。希望这有帮助

答案 1 :(得分:1)

只需在.wordcount

中找到<li>即可
jQuery('textarea').on('input', function($) {
        var regex = /\s+/gi;
        var count =  jQuery(this).val().trim().replace(regex, ' ').split(" ").length;
        jQuery(this).parent().find('.wordcount').html(count);
);