Question

我正在使用以下jQuery功能实时计算单词：

$("input[type='text']:not(:disabled)").each(function(){
            var input = '#' + this.id;
            word_count(input);

            $(this).keyup(function(){
                word_count(input);
            })

        });

var word_count = function(field) {
        var number = 0;
        var original_count = parseInt($('#finalcount').val());
        var matches = $(field).val().match(/\b/g);
        if(matches) {
            number = matches.length/2;
        }
        $('#finalcount').val(original_count + number)
    }

我遇到的问题是，当我开始在输入字段中输入时，计数会立即增加2，即使在空格和我的删除键上也是如此。有什么想法会发生这种情况吗？

我正在学习本教程：http://www.electrictoolbox.com/jquery-count-words-textarea-input/

输入： <input class="widest" id="page_browser_title" name="page[browser_title]" size="30" type="text" value="">

显示输入： <input class="widest" disabled="disabled" id="finalcount" name="page[word_count]" size="30" type="text" value="662">

Answer 1

每次按键都会递增，因为你要告诉它：

$('#finalcount').val(original_count + number)

如果你添加另一个单词，你会发现它增加不是2，而是增加3.大概你在页面上有几个输入，你打算让finalcount输入显示每个输入中的单词数。将计数存储在变量中并将变量添加到一起以获取最终计数值。或者每次都计算每个输入中的单词。

var wordCounts = {};

function word_count (field) {
    var number = 0;
    var matches = $(field).val().match(/\b/g);
    if (matches) {
        number = matches.length / 2;
    }
    wordCounts[field] = number;
    var finalCount = 0;
    $.each(wordCounts, function(k, v) {
        finalCount += v;
    });
    $('#finalcount').val(finalCount)
}

工作演示：http://jsfiddle.net/gilly3/YJVPZ/

编辑顺便说一句，通过删除一些冗余，您有机会稍微简化代码。您可以用以下内容替换您发布的所有JavaScript：

var wordCounts = {};
$("input[type='text']:not(:disabled)").keyup(function() {
    var matches = this.value.match(/\b/g);
    wordCounts[this.id] = matches ? matches.length / 2 : 0;
    var finalCount = 0;
    $.each(wordCounts, function(k, v) {
        finalCount += v;
    });
    $('#finalcount').val(finalCount)
}).keyup();

http://jsfiddle.net/gilly3/YJVPZ/1/

Answer 2

修改

检查this example。

为什么不使用split(" ")而不是匹配和划分结果？你将拥有一个包含所有单词的数组，数组的长度将是单词的数量。

var matches = $(field).val().split(" ");

另外，为什么每次匹配旧结果时都会添加？

$('#finalcount').val(original_count + number)

这不是每次都会增加所有单词两次吗？

jQuery：实时计算单词

2 个答案: