Question

121

Counting and limiting words in a textarea

rated 0 times [ 123] [ 2] / answers: 1 / hits: 69840 / 11 Years ago, sun, july 28, 2013, 12:00:00

I managed to make this little jquery function to count the number of words entered in textarea field.

and here is the code:

JQUERY:

$(document).ready(function()

{

var wordCounts = {};

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

    });

    $('#display_count').html(finalCount);

    am_cal(finalCount);

}).keyup();

});

and here is html code

<textarea name=txtScript id=word_count cols=1 rows=1></textarea>

Total word Count : <span id=display_count>0</span> words.

how can i make modifications in it to have the output like this

Total word Count : 0 words. Words left : 200

and when it reach 200 words it shall not allow to either paste, or type more words in the textarea field, in jquery? i.e. it shall restrict user to type exactly 200 words not more than that.

Please help.

Thanks a lot in advance.

EDIT: The modification is needed in this code only, as i am very well aware of the plugins, but they may interfere with the main code.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kamronr

Add To Favorites

Follow

Total Points: 749

Total Questions: 110

Total Answers: 122

Location: Dominica

Member since Sat, Nov 5, 2022

2 Years ago

kamronr questions

1 How to enforce semicolon in Typescript interface

Mon, Dec 21, 20, 00:00, 4 Years ago

1 Jest - How do I reset object state for each test?

Fri, Oct 16, 20, 00:00, 4 Years ago

1 Change (Add/Remove) CSS Class On Mobile With JS or jQuery

Sat, Oct 3, 20, 00:00, 4 Years ago

1 Don't allow horizontal scroll when scrolling vertically (and vice versa)

Tue, Oct 1, 19, 00:00, 5 Years ago

1 How to extract text from PDF?

Sun, Jul 28, 19, 00:00, 5 Years ago

View All

answered 11 Years ago brooksb · Accepted Answer

Using return false to stop keyup events doesn't block the event, because in this case the event has already fired. The keyup event fires when the user releases a key, after the default action of that key has been performed.

You will need to programmatically edit the value of the textarea you have as #wordcount:

$(document).ready(function() {

  $("#word_count").on('keyup', function() {

    var words = 0;



    if ((this.value.match(/S+/g)) != null) {

      words = this.value.match(/S+/g).length;

    }



    if (words > 200) {

      // Split the string on first 200 words and rejoin on spaces

      var trimmed = $(this).val().split(/s+/, 200).join(" ");

      // Add a space at the end to make sure more typing creates new words

      $(this).val(trimmed + " ");

    }

    else {

      $('#display_count').text(words);

      $('#word_left').text(200-words);

    }

  });

});

http://jsfiddle.net/k8y50bgd/