所有文本区域中的总字数

Question

我正在尝试计算用户在每个文本区域中键入的单词数，并将它们相加并在用户键入时显示给用户，到目前为止我已经做到了：

$("[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>

但是问题是这段代码不在到达最后一个文本区域（在本例中是第三个文本区域）之前不会输出任何内容，一旦您单击最后一个文本区域，它就会计算单词量并输出它。

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

Answer 1

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

请尝试使用此代码：

$(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)？），但它可以正确检查对于重复的空格。您最好尝试匹配正则表达式以降低复杂性。

这是在这里处理我的 jsFiddle。

编辑

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

Answer 2

为什么你有这条线？尝试将其删除。

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

如果遇到空字段，它会导致您将总和重置为零，直到填充字段之后的所有字段都有内容为止。

Answer 3

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

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

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