所有文本区域中的总字数答案

【问题标题】：Total amount of words in all textareas所有文本区域中的总字数
【发布时间】：2011-04-14 04:03:45
【问题描述】：

我正在尝试计算用户在每个文本区域中输入的单词数量，并将它们加起来并在用户输入时显示给用户，到目前为止我有这个：

$("[class^='count[']").bind('keyup click blur focus change paste', function() {

    sum = 0;

        $("[class^='count[']").each(function() {

            var Words = jQuery.trim($(this).val()).split(' ').length;

            sum += Number(Words);

            if($(this).val() === '') { sum = 0; }

            $('#maxwords').children('span').text(sum);



        });



});

这是我的 HTML：

<ul id="forms">

            <li><textarea name="PresentationAbstract1"  id="PresentationAbstract1"style="width:700px"></textarea></li>

            <li><textarea name="PresentationAbstract2"  id="PresentationAbstract2"style="width:700px"></textarea></li>

            <li><textarea name="PresentationAbstract3"  id="PresentationAbstract3"style="width:700px"></textarea></li>


            <li id="maxwords">Total words (<span>0</span>)</li>
        </ul>

但是问题是，在您到达最后一个 textarea 之前，此代码不会输出任何内容，在本例中是第三个 textarea，一旦您单击最后一个 textarea，它就会计算字数并输出它。

这里是它需要的项目的 URL： http://www.meetingproceedings.com/harvester2/wordcount.html。任何想法，将不胜感激。

【问题讨论】：

标签： jquery word counter

【解决方案1】：

您可以通过代码改进一些事情，但最突出的是$('#maxwords').children('span').text(sum); 在您的.each() 迭代中。这将使您的代码编写您的字数计数每次计算文本区域中的字数时。然后是 if($(this).val() === '') { sum = 0; } 行，如果 textarea 内没有任何内容，它会重置字数（这就是为什么在第三个 textarea 上书写时字数只会“输出”到跨度）。

试试这个代码：

$(function() {

    var countWords = function () {
        var sum = 0;
        $("textarea").each(function() {

            var words = $(this).val().split(' ');
            $.each(words, function(i, v) {
                if ($.trim(v) !== '') {sum++;}
            });

        });

        $('#maxwords span').text(sum);
    };

    // this binds our counting function to the textareas
    $("textarea").bind('keyup click blur focus change paste', countWords);

    // let's run this on document ready
    countWords();

});

这是一个 O(n^2) 算法（或者更确切地说是 O(nm)?），但它正确检查重复的空格。您最好尝试匹配正则表达式以降低复杂性。

这是working on my jsFiddle here。

编辑

更新了解决方案，以便在准备好文档时也运行计数功能。或者，您也可以将ready 处理程序添加到textarea 绑定（即$("textarea").bind('ready keyup click blur focus change paste', countWords)）而不是调用函数本身，这也应该冒泡到文档就绪处理程序，但我只是更喜欢把它写出来这样就清楚了。

【讨论】：

非常感谢理查德。完美运行！如果数据库预先填充了任何文本区域，关于如何在准备好的文档中显示总字数的任何想法？！
要让它在$(document).ready() 上运行，您可以将整个计数+显示逻辑封装到一个函数中，然后直接调用它。让我为你修改我的答案。

【解决方案2】：

为什么会有这条线？尝试删除它。

if($(this).val() === '') { sum = 0; }

如果您遇到一个空字段，它会导致您将总和重置为零，在填充字段之后的所有字段都有内容之前，您总是会这样做。

【讨论】：

【解决方案3】：

$("#form textarea").live('KeyUp', function(){
var sum = 0;
$("#form textarea").each(function(){
   sum+= $(this).val().split(' ').length;

});
//put sum in your span
});

如果你希望它是实时的，你必须处理 keyup 事件。

【讨论】：