jQuery plugin: word-counter for textarea

Advertisement

Sorry friends on the way of move to new home I’ve been lost from the blog as I didn’t have internet connection for few last weeks. Now, I’m back and I try to be regular as much as I can. Inspired from the new feature of wordpress 2.6.x which displays word count of each post, I’ve developed jQuery plugin to display word-count of Textarea. Please note that it is word count plugin not character counter.

LIVE DEMO

Jquery plugin: Word-count code

jQuery.fn.wordCount = function(params)
{
   var p =  {
   counterElement:"display_count"
   };
   var total_words;

  if(params) {
      jQuery.extend(p, params);
   }

  //for each keypress function on text areas
  this.keypress(function()
  {
    total_words=this.value.split(/[\s\.\?]+/).length;
    jQuery('#'+p.counterElement).html(total_words);
   });
};

VIEW PLUGIN’S CODE

As you can in the above code, I assume that each words of a paragraph are separated by the either spaces or dots(.) . Please have your suggestion if i can more characters to improve this plugin.

How to use this plugin?

Well, you can guess that a Textarea is needed of whose words are counted and another element like div or span needed to display the word count.

For example, the below HTML code contains Textarea (whose total word is counted) and span (for displaying counted word).

<textarea name="word_count" id="word_count" cols="30" rows="6"></textarea>
Total word Count : <span id="display_count">0</span>

Remember that the id of text area is “word_count” and “display_count“.

Now, let look at the jQuery code for displaying word count of text area , note that we are calling the function wordCount() which we’ve just developed in the plugin of jQuery.

$('#word_count').wordCount();

Note: display_count  is default id of element which is already defined in the plugin if you want to use the different id of elment then you’ve to override the value of variable counterElement which contains the id of element displaying word count.

$('#word_count').wordCount({counterElement:"word_counter"});

DOWNLOAD EXAMPLE CODE

Enter your email address and get free tutorials, tips and tricks of PHP, Ajax, JavaScript and CSS directly delivered to you email inbox:

45 Comments on “jQuery plugin: word-counter for textarea”

  • David wrote on 20 October, 2008, 12:23

    nice how to, very usefull, but in the article I think you may want to say wordpress 2.6.x right? :)

    best regards

  • Roshan wrote on 20 October, 2008, 14:53

    @Davi- Thanks for heads up dude….corrected now…

  • Tarquin wrote on 20 October, 2008, 19:52

    Another nice tutorial, this is a useful piece of code for any website allowing comments from the public.

    Thanks

  • azrain wrote on 21 October, 2008, 3:19

    simple and superb. nice one. this is what i need. thanks.

  • Asim Sajjad wrote on 21 October, 2008, 3:25

    This is the nice think, i have used it but i have found little error in it and i hope that you will fix it, the problem is that i have typed “How are you ?” you see there is space before question mark it will give number of words 4 but if i remove the space between word “you” and the question mark (?) the still it will give number of count to 4. which i think is wrong. hope you will fix that problem.

  • Deineshd wrote on 21 October, 2008, 5:29

    I especially use word counter for counting the no of words of my the Sponsored posts from payperpost and sponsored reviews.

    I think Blogger doesn’t support jquery plugin.If it would have in JavaScript then it wound have become really useful to me.

  • shakeel shrestha wrote on 21 October, 2008, 7:09

    Roshan dai,

    I am looking for a way to use tinymce with character counter (limit character). I tried with jquery character count also, but didn’t work. Can you give me any idea?

  • Roshan wrote on 21 October, 2008, 7:31

    @Deineshd – you can easily use this if you can use javascript, jquery and jquery plugin is just a javascript framework and piece of code of javascript… if you can use javascript then you must be able to use jquery

    @shakeel – javascript code must work with tinymce as it is also built using javascript

    @Asim Sajjad – thanks for reporting the bug, I’ll fix it in the next update of this plugin..

  • Felix wrote on 21 October, 2008, 11:09

    Roshan…if you write “la-vida-loca/es@loca” count 1 word. If you write “la.vida.loca,es.loca”, count 4 words. The separator is just a dot or space when they should be (space).,;-@

    Realy good Roshan!!

  • Roshan wrote on 21 October, 2008, 11:30

    @felix – thanks very much for your valuable suggestion, I’ll get it fixed in next release…

  • Asim Sajjad wrote on 28 October, 2008, 10:44

    Roshan, if i type “hello,how” then it will count 1 which is i think wrong, i think you should handle the comma (,) sign as well hope you will do it in the future release of the plug-in if you like my suggestion :)

  • Roshan wrote on 28 October, 2008, 14:29

    @asim – every suggestion is highly appreciated and will be used in the next version…

  • Asim Sajjad wrote on 30 October, 2008, 7:37

    when will you give the new version of the word counter plug-in, i have write the code for that plug-in and i have tested it well, if you don’t mind i will share on you blag ? can i do or not ?

  • webdevvote wrote on 12 November, 2008, 16:18

    Track back from: http://webdevvote.com

  • Viral Patel wrote on 26 November, 2008, 12:44

    Nice plugin..
    Just wanted to highlight a bug. This does’nt work is I copy / paste certain text in the textarea. I think this is because you have mapped keypress event of the textarea. You have to check .onpaste event too.

    Nice effort and a simply jquery code.

    I like your site and I visit you frequently :)

  • Roshan wrote on 26 November, 2008, 17:33

    @Viral Patel – thanks a lot for the suggestion … I’ll be working on the the fixes mentioned by you and other friends in the another release of this plugin…

  • Waqas wrote on 8 December, 2008, 5:44

    please see this hope this will help you

    http://asimsajjad.blogspot.com/2008/11/jquery-word-counter.html

    very good article

  • Roshan wrote on 8 December, 2008, 6:34

    @waqas – thanks for revising my code…..

  • Waqas wrote on 8 December, 2008, 7:43

    I have not revised your code i have just read that post and from there i have check your post as the person name Asim has give your link

  • veasna_set wrote on 16 December, 2008, 9:12

    Thanks for your code.

  • Mohammad wrote on 24 December, 2008, 15:20

    GOOD ONE! but how can we limit user to for example 100 words?

  • Keith Pickett` wrote on 30 December, 2008, 19:46

    Hi Roshan,
    Thanks for this code. It is exactly what i’m looking for. I also needed a way to limit to a specific number of words, so I added this to my code… Hope it is useful to someone:

    Inside the wordCount function at the “this.keypress” sub-function, I modified the code:
    if (total_words > p.wordLimit) {
    jQuery(‘#’+p.counterElement).html(p.wordLimit + ‘ word maximum reached’);
    } else {
    jQuery(‘#’+p.counterElement).html(total_words);
    }

    Next, in the document.ready area, I call the function and pass in a new variable for wordLimit:
    $(‘#word_count’).wordCount({counterElement:”word_counter, wordLimit:50 “});

    It’s not the most efficient way to do it, but you get the idea.

    Thanks again,
    Keith

  • Fran (ssclamp) wrote on 16 February, 2009, 2:31

    Thanks… very util

  • iamvasim@alice.it wrote on 26 March, 2009, 7:33

    Hello thanks for cool script,
    i want to add max word limit for user
    how to put this limit ?

    thank you.

  • iamvasim@alice.it wrote on 26 March, 2009, 9:49

    hello all i have make one function for word limitation check out ::::
    ==============================================================
    wordLen)
    {
    objvalue = obj.value.split(/[\s]+/);

    var newval = ”;

    for(var m=0; m<wordLen; m++)
    {
    newval+=objvalue[m]+’ ‘;
    }

    obj.value=”;
    obj.value=newval;

    return false;
    }
    return true;
    }

  • mescript wrote on 13 June, 2009, 12:58

    nice

  • IMF wrote on 17 June, 2009, 16:06

    Quite useful, thanks.

  • ZK@Web Marketing Blog wrote on 21 June, 2009, 4:10

    jQuery, since 1.2.2, has had an API for “special events”. These events are special because they have the ability to do some extra work for specific events and even the option to bypass some of the internal jQuery event system. With these special events you can create custom events that require some setup work or you can completely overwrite the behavior of native events.

  • sohbet wrote on 2 July, 2009, 13:20

    hi good thank you master

  • ????? wrote on 13 August, 2009, 9:43

    thank you so much

  • WiserX wrote on 18 August, 2009, 3:19

    Really useful stuff

  • Alan Hogan wrote on 20 August, 2009, 23:27

    I have forked this at http://github.com/alanhogan/jQuery-Word-Count/tree/master and made a minor improvement.

  • Shubham Jain wrote on 18 November, 2009, 12:27

    Why to download, install, and then use plugin. Writing code to count words through javascript is 2 minutes job and can be done easily even without jQuery.

  • Simon Brook wrote on 30 November, 2009, 10:27

    Hi Roshan,

    To avoid doing too much counting (ie on every keypress) you could add something to check which key was pressed (in this example space or “.” – the comment about the comma is good too).


    this.keypress(function(k) {
    if (k.which == 32 || k.which == 46) {
    total_words=this.value.split(/[\s\.\?]+/).length;
    jQuery('#'+p.counterElement).html(total_words);
    }
    });

  • Pawan Adhikari wrote on 2 December, 2009, 7:33

    i have used your above code .. and hell it works fine ..

  • adana çiçek sipari?i wrote on 22 December, 2009, 10:24

    thank you adminstrator

  • Trevor wrote on 17 May, 2010, 20:59

    Good job, nice and easy :)

  • Prasad wrote on 1 December, 2010, 17:41

    Good plugin, better to handle zero-length inputs.

    total_words = 0;
    if (this.value.length > 0) {
    total_words=this.value.split(/[\s\.\?]+/).length;
    }

  • Ardi Wirawan wrote on 26 January, 2011, 6:42

    thanks.
    great tutorial..

  • lokanath wrote on 15 February, 2011, 15:47

    only space and . are not the word separator as a someone can use ; , tab special character etc….

  • Abhijeet wrote on 12 December, 2012, 13:01

    Hi dude,
    very gr8 article. Worked perfectly in normal HTML. But faced some problem while trying to integrate into ASP.NET website. Please help

Trackbacks

  1. Algunos scripts para jQuery : Notitodo
  2. Petite sélection de plug-in jquery
  3. pligg.com
  4. 10+ Useful jQuery Plugins « Nulls

Write a Comment

 


Copyright © 2014 Roshan Bhattarai's Blog. All rights reserved.
Powered by WordPress.org, Custom Theme and ComFi.com Calling Card Company.