jQuery plugin: word-counter for textarea

• Monday, October 20, 2008, 11:43
• how-to, javascript, jquery, tutorial
• 24 comments

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

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

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

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

• Share
  Delicious Digg Design Float Mixx Reddit StumbleUpon Technorati
• Printable version

Related Posts

» How to execute PHP code entered from textbox or textarea
» Making Money from blog with the help of WP Affiliate Elite
» Display random number in random way using JavaScript
» Top Floating message box using jQuery

24 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

Trackbacks

1. Algunos scripts para jQuery : Notitodo
2. Petite sélection de plug-in jquery

Write a Comment