jQuery: Count words in real time

by

It is incrementing with every key press because you are telling it to with:

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

And if you add another word, you will find that it increments not by 2, but by 3. Presumably, you have several inputs on the page, and you intend for the finalcount input to display the number of words in each input. Either store the counts in a variable and add the variables together to get your finalcount value. Or count the words in each input every time.

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

Working demo: http://jsfiddle.net/gilly3/YJVPZ/

Edit: By the way, you’ve got some opportunities to simplify your code a bit by removing some redundancy. You can replace all of the JavaScript you posted with this:

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/

More Related Contents:

  1. jQuery append function is just appending the html but not the classes related to it
  2. Updating php values using jquery
  3. Jquery replace only specific characters [closed]
  4. Regex for Email Address along with name format [duplicate]
  5. Display attribute ‘Title’ of element/s in other element on Focus or Click
  6. What’s the best way to detect a ‘touch screen’ device using JavaScript?
  7. How to delay the .keyup() handler until the user stops typing?
  8. Is there a null-coalescing (Elvis) operator or safe navigation operator in javascript?
  9. Remove ALL white spaces from text
  10. Converting milliseconds to a date (jQuery/JavaScript)
  11. Format a number as 2.5K if a thousand or more, otherwise 900
  12. check if jquery has been loaded, then load it if false
  13. Check if option is selected with jQuery, if not select a default
  14. Export to csv in jQuery
  15. How can I listen for a click-and-hold in jQuery?
  16. How to scroll the window using JQuery $.scrollTo() function
  17. How to get the number of lines in a textarea?
  18. Convert numbers to letters beyond the 26 character alphabet
  19. jQuery – select all text from a textarea
  20. How can I refresh the screen on browser resize?
  21. Skip ng-repeat JSON ordering in Angular JS
  22. Highlight current page in jquery
  23. Chart.js v2: How to make tooltips always appear on pie chart?
  24. Select values of checkbox group with jQuery
  25. Submit form using AJAX in Asp.Net mvc 4
  26. Print repeating Page headers in Chrome [closed]
  27. How can I make an image carousel with only CSS?
  28. Pass accepts header parameter to jQuery AJAX
  29. Show select dropdown in jQuery? [duplicate]
  30. How do I add an integer value with javascript (jquery) to a value that’s returning a string?

Leave a Comment