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>

然而问题是这个代码在你到达最后一个textarea之前不会输出任何东西，在这种情况下是第三个textarea，当你点击最后一个textarea时它会计算出单词的数量并输出它。

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

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

您可以使用代码改进一些内容，但最突出的是$('#maxwords').children('span').text(sum);在.each()次迭代中。这将使您的代码在每次计算textarea中的单词数时写入单词count 。然后是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)），而不是调用函数本身，这也应该冒泡到文档就绪处理程序，但我只是喜欢把它写出来以便它清楚。

所有textareas中的单词总数

3 个答案: