jQuery: Đếm từ trong thời gian thực

Question

Tôi đang sử dụng các chức năng jQuery sau để đếm số từ trong thời gian thực:

$("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) 
    } 

Vấn đề tôi chạy vào đó là khi tôi bắt đầu gõ trong một lĩnh vực đầu vào, số lượng tăng ngay lập tức bằng hai, ngay cả trên không gian và phím xóa của tôi. Bất kỳ ý tưởng tại sao điều này sẽ xảy ra?

Tôi đã làm theo hướng dẫn này: http://www.electrictoolbox.com/jquery-count-words-textarea-input/

Input: <input class="widest" id="page_browser_title" name="page[browser_title]" size="30" type="text" value="">

Display Input: <input class="widest" disabled="disabled" id="finalcount" name="page[word_count]" size="30" type="text" value="662">

Answer 1

Nó được incrementing với mỗi nhấn phím bởi vì bạn đang nói với nó để có:

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

Và nếu bạn thêm một từ khác, bạn sẽ thấy rằng nó increments không bằng 2, nhưng bởi 3. Có lẽ, bạn có một số đầu vào trên trang và bạn dự định nhập số tiền cuối cùng để hiển thị số lượng từ trong mỗi đầu vào. Lưu trữ số lượng trong một biến và thêm các biến lại với nhau để nhận giá trị số tiền cuối cùng của bạn. Hoặc đếm các từ trong mỗi đầu vào mỗi lần.

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) 
} 

bản demo làm việc: http://jsfiddle.net/gilly3/YJVPZ/

Edit: Bằng cách này, bạn đã có một số cơ hội để đơn giản hóa mã của bạn một chút bằng cách loại bỏ một số dự phòng. Bạn có thể thay thế tất cả các hoạt Javascript bạn được đăng với điều này:

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

Sửa

Kiểm tra this example.

---

Tại sao bạn không sử dụng split(" ") thay vì khớp và chia kết quả? Bạn sẽ có một mảng chứa tất cả các từ của bạn, độ dài của mảng sẽ là số từ.

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

Ngoài ra, tại sao bạn thêm mỗi lần khớp với kết quả cũ?

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

Điều này không phải lúc nào cũng thêm tất cả các từ hai lần?