Jquery 所有文本区域中的单词总数

我正在尝试计算用户在每个文本区域中键入的单词数量，并将它们相加，并在用户键入时向用户显示。到目前为止，我有以下内容：

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

---

任何想法都将不胜感激

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

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

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

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

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

---

如果你想让它成为实时的，你就得处理keyup事件。

代码中有一些地方可以改进，但最突出的是$'maxwords'。children'span'。textsum；每个迭代都在您的内部。这将使您的代码在每次计算textarea中的字数时都记录字数。然后是if$this.val=={sum=0；}行，如果textarea中没有任何内容，它会重置字数，这就是为什么在第三个textarea上写入时字数只输出到span

请尝试以下代码：

$(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();

});

这是一个On^2算法，或者更确切地说是一个Onm？，但它正确地检查重复的空格。您最好尝试与正则表达式进行匹配，以降低复杂性

这是

编辑

---

已更新解决方案，以便在文档就绪时也运行计数功能。或者，您也可以将ready处理程序添加到textarea绑定中，即$textarea.bind'ready keyup click blur focus change paste'，countWords而不是调用函数本身，这也应该会出现在document ready处理程序中，但我更喜欢将其写出来，这样就清楚了。

非常感谢Richard。很好用！如果数据库预先填充了任何文本区域，您知道如何在document ready上显示总字数吗？！为了让它在$document.ready上运行，您可以将整个计数+显示逻辑封装到一个函数中，只需调用它即可。让我为你修改我的答案。