CODEWITHSUNDEEP
javascriptjqueryhtml
ashis
ashis

Reputation: 381

Counting and limiting words in a textarea

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

here is the fiddle

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.

Upvotes: 21

Views: 73151

Answers (7)

Kaleem Nalband
Kaleem Nalband

Reputation: 697

Here is the final solution.

(function(){
  
  $("textarea").after("<p>Number of words: <span class='count'>0</span>/10</p>");
  
  $("textarea").keypress(function(){    
    
    var words = $.trim($(this).val()).split(" ").filter(function(word){
     return $.trim(word).length > 0
    });
    
    var wordlength = words.length;
    $(".count").text(wordlength);
    
    if(wordlength > 10){           
       alert("Please do not enter more than 10 words");
       $(this).val( words.splice(0,10).join(" "));
       return false;
    }   
  })
})

Upvotes: 0

Michal
Michal

Reputation: 2532

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/

Upvotes: 52

Steve Bradshaw
Steve Bradshaw

Reputation: 817

You can use positive lookahead regexes to preserve the whitespace - so that returncodes and tabs are not collapsed to a single space. Something like this:

  var wordLimit = 5;
  var words = 0;
  var jqContainer = $(".my-container");
  var jqElt = $(".my-textarea");

function charLimit()
{
  var words = 0;
  var wordmatch = jqElt.val().match(/[^\s]+\s+/g);
  words = wordmatch?wordmatch.length:0;

  if (words > wordLimit) {
      var trimmed = jqElt.val().split(/(?=[^\s]\s+)/, wordLimit).join("");
      var lastChar = jqElt.val()[trimmed.length];
      jqElt.val(trimmed + lastChar);
  }
  $('.word-count', jqContainer).text(words);
  $('.words-left', jqContainer).text(Math.max(wordLimit-words, 0));
 }
 
 jqElt.on("keyup", charLimit);
 charLimit();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="my-container">
  <textarea class="my-textarea"></textarea>
  <span class="words-left"></span> words left
<div>

Upvotes: 0

Maulik Padamani
Maulik Padamani

Reputation: 3

$(document).ready(function(){ $("textarea").on('keyup',function(){

                var value = $('textarea').val();
                var wordCount = 0;

                if(value == ""){
                    $('textarea').empty();
                }
                else{

                    var regex = /\s+/gi;
                    var wordCount = value.trim().replace(regex, ' ').split(' ').length;
                }

                    if(wordCount > 25){
                     var trimmed = $(this).val().split(/\s+/,25).join(" ");
                    $(this).val(trimmed + " ");
            }
            else{
                $('#display_count').html(25- wordCount +" words left");
            }


              });

});

Upvotes: 0

adeneo
adeneo

Reputation: 318212

I would do it like this ?

$("#word_count").on('keydown', function(e) {
    var words = $.trim(this.value).length ? this.value.match(/\S+/g).length : 0;
    if (words <= 200) {
        $('#display_count').text(words);
        $('#word_left').text(200-words)
    }else{
        if (e.which !== 8) e.preventDefault();
    }
});

FIDDLE

Upvotes: 4

Praveen
Praveen

Reputation: 56509

Adding a simple if condition will solve your problem.

$.each(wordCounts, function(k, v) {
    if(finalCount <= 200) {
        //Todos
    }
    else {
      return false;  //prevent keyup event
    }
 });

Upvotes: 1

Sparko
Sparko

Reputation: 735

A simple plugin can be found here:

Simple Textarea Word Counter using jQuery

Upvotes: 2

Related Questions