Simple Textarea Word Counter jQuery Plugin

by c.bavota | Posted in Downloads | 18 comments

Oct 20 2011

I know there are a few textarea word counter jQuery plugins out there already, but I felt like building my own since I wasn’t a fan of the ones that are available. Nothing new here but I did my best at making it as simple to use and efficient as possible.

/**
 * jQuery.textareaCounter
 * Version 1.0
 * Copyright (c) 2011 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 10/20/2011
**/
(function($){
	$.fn.textareaCounter = function(options) {
		// setting the defaults
		// $("textarea").textareaCounter({ limit: 100 });
		var defaults = {
			limit: 100
		};	
		var options = $.extend(defaults, options);
 
		// and the plugin begins
		return this.each(function() {
			var obj, text, wordcount, limited;
			
			obj = $(this);
			obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. '+options.limit+' words</span>');

			obj.keyup(function() {
			    text = obj.val();
			    if(text === "") {
			    	wordcount = 0;
			    } else {
				    wordcount = $.trim(text).split(" ").length;
				}
			    if(wordcount > options.limit) {
			        $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
					limited = $.trim(text).split(" ", options.limit);
					limited = limited.join(" ");
					$(this).val(limited);
			    } else {
			        $("#counter-text").html((options.limit - wordcount)+' words left');
			    } 
			});
		});
	};
})(jQuery);

Load that up and then you can use the following to make it work:

$("textarea").textareaCounter({ limit: 100 });

The default limits to 100 words but you can change that to whatever you like. Here is a simple HTML setup using the plugin:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
/**
 * jQuery.textareaCounter
 * Version 1.0
 * Copyright (c) 2011 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 10/20/2011
**/
(function($){
	$.fn.textareaCounter = function(options) {
		// setting the defaults
		// $("textarea").textareaCounter({ limit: 100 });
		var defaults = {
			limit: 100
		};	
		var options = $.extend(defaults, options);
 
		// and the plugin begins
		return this.each(function() {
			var obj, text, wordcount, limited;
			
			obj = $(this);
			obj.after('<span style="font-size: 11px; clear: both; margin-top: 3px; display: block;" id="counter-text">Max. '+options.limit+' words</span>');

			obj.keyup(function() {
			    text = obj.val();
			    if(text === "") {
			    	wordcount = 0;
			    } else {
				    wordcount = $.trim(text).split(" ").length;
				}
			    if(wordcount > options.limit) {
			        $("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
					limited = $.trim(text).split(" ", options.limit);
					limited = limited.join(" ");
					$(this).val(limited);
			    } else {
			        $("#counter-text").html((options.limit - wordcount)+' words left');
			    } 
			});
		});
	};
})(jQuery);
</script>
</head>

<body>
	<textarea rows="15" cols="50"></textarea>

	<script type="text/javascript">
	$("textarea").textareaCounter();
	</script>

</body>
</html>

That would give you a textarea box that looks like this:

Download

Tags: jquery, jquery plugin, textarea, word count

Short URL: http://bit.ly/orrtjk

18 comments for “Simple Textarea Word Counter jQuery Plugin”

Schallzahnbürste

November 12, 2011 at 8:51 am

Nice one. This would be very usefull in the backend of WordPress and a minimum limit instead of maximum.
sunil

November 28, 2011 at 9:43 am

this is the best Jquery plugin….

Thanx a lot
Radoslav

December 13, 2011 at 3:31 pm

Try write one word on first line and then press ENTER and write other word.. Countdown does not work correctly..
- c.bavota
  
  December 21, 2011 at 7:55 am
  
  That is a small bug. I’m doing some tests to find a solution. Thanks for pointing that out.
- jaime
  
  January 18, 2012 at 3:43 pm
  i’ve been using a regular expression to split at spaces and line breaks:
  
  $.trim(text).split(/[\s\n\r]+/).length
- c.bavota
  
  January 19, 2012 at 1:05 pm
  
  @jaime I tried your solution but it didn’t work.
Steuerberater Berlin

December 27, 2011 at 1:06 pm

Thanks. I am going to have a go at this one. Looks good
Jayshankar Krish

December 29, 2011 at 12:59 pm

Thanks for the wonderful plugin, will be very helpful and keep up the gr8 work going, God bless you for this kind gesture. Take care!!!
dynamics crm

January 4, 2012 at 1:39 pm

Great job with building the textarea word counter jQuery plugin. I’ve tried many textarea word counter jQuery plugins before. Yours seems pretty simple to use. I can’t wait to try it out on my website.
jim

January 4, 2012 at 5:28 pm

Thanks for the great plugin! Awesome!
Simon

January 8, 2012 at 10:27 am

Exactly what I needed for one of my projects, thank you!

Phil Rae

January 27, 2012 at 7:49 pm

Hi,

I found a couple of small bugs when trying to add your plugin to a form with multiple textareas that need to be validated.

Firstly, a simple one – the line:

if(wordcount > options.limit) {

Should actually read

if(wordcount >= options.limit) {

This is because the first version will never be true because you are not allowed to be higher than the limit, and therefore your “0 words left” red text will never show.

The second issue is that your #counter-text span is set using an ID name. This is wrong as you are not able to have multiple textareas to check as when you edit any textarea past the first one, the count of words in the current textarea field will cause the count on the first textarea to update. Therefore you should change “counter-text” to be a class name, then use the ‘obj’ object to locate its nearest counter-text span to update. Therefore the whole plugin should now read:

(function($){
	$.fn.textareaCounter = function(options) {
		// setting the defaults
		// $("textarea").textareaCounter({ limit: 100 });
		var defaults = {
			limit: 100
		};	
		var options = $.extend(defaults, options);
 
		// and the plugin begins
		return this.each(function() {
			var obj, text, wordcount, limited;
 
			obj = $(this);

			obj.after('Max. '+options.limit+' words');
 
			obj.keyup(function() {
			    text = obj.val();
			    if(text === "") {
			    	wordcount = 0;
			    } else {
				    wordcount = $.trim(text).split(" ").length;
				}
			    if(wordcount >= options.limit) {
			        obj.parent().find(".counter-text").html('0 words left');
					limited = $.trim(text).split(" ", options.limit);
					limited = limited.join(" ");
					$(this).val(limited);
			    } else {
			        obj.parent().find(".counter-text").html((options.limit - wordcount)+' words left');
			    } 
			});
		});
	};
})(jQuery);

I hope that helps some people who are trying to add multiple text areas. Thanks for a great plugin though – other than those two bugs, it worked a treat!

Phil Rae

January 27, 2012 at 8:01 pm

Hi, me again. I just realise that when you reload a page with a textarea already populated with text, it doesn’t show the current ‘words left’ until you start typing. Therefore I’ve amended the plugin slightly so that if the field is not empty on page load, it performs the word count check, just as you have on keyup. Edit below…

(function($){
	$.fn.textareaCounter = function(options) {
		// setting the defaults
		// $("textarea").textareaCounter({ limit: 100 });
		var defaults = {
			limit: 100
		};	
		var options = $.extend(defaults, options);
 
		// and the plugin begins
		return this.each(function() {
			var obj, text, wordcount, limited;
 
			obj = $(this);

			obj.after('Max. '+options.limit+' words');
			
			// function to check word count in field			
			var countcheck = function() {
		    text = obj.val();
		    if(text === "") {
		    	wordcount = 0;
		    } else {
			    wordcount = $.trim(text).split(" ").length;
				}
		    if(wordcount >= options.limit) {
		      obj.parent().find(".counter-text").html('0 words left');
					limited = $.trim(text).split(" ", options.limit);
					limited = limited.join(" ");
					$(this).val(limited);
		    } else {
		      obj.parent().find(".counter-text").html((options.limit - wordcount)+' words left');
		    } 
			}
			
			// if field is not empty, count words
			if(obj.val() != '') {
				countcheck(); }
 
 			// if field changes, count words
			obj.keyup(function() {
				countcheck(); });
		});
	};
})(jQuery);

Erick Bones

February 28, 2012 at 8:04 am

Well, I have set it up on my server and everything works fine. There’s only one but… Did anyone have any problems with the speed of this plugin? When I type in letters they show up like in slow motion. Please tell me if anyone experienced it or it’s just my problem?
OIH

April 2, 2012 at 8:51 am

Hi We are trying use more time this code not working properly, please show any demo or guide us..

Anil Doma

April 3, 2012 at 11:47 pm

Hi, Its a great simple plugin but i found the following bugs:

1. The code doesn’t treat newline characters as new words.
2. If there are multiple textarea in a page the code updates the first textarea’s counter-text.
3. The Pre-populated text count is incorrect.

The code below should fix all the bugs:

(function($){
	$.fn.textareaCounter = function(options) {
		// setting the defaults
		// $("textarea").textareaCounter({ limit: 100 });
		var defaults = {
			limit: 100
		};	
		var options = $.extend(defaults, options);
 
		// and the plugin begins
		return this.each(function() {
			var obj, text, wordcount, limited;
 
			obj = $(this);
			obj.after('Max. '+options.limit+' words');
 
			obj.keyup(function() {
			    text = obj.val();
			    if(text === "") {
			    	wordcount = 0;
			    } else {
				    wordcount = $.trim(text).split(/[\s\.\?]+/).length;
				}
			    if(wordcount >= options.limit) {
			        obj.next().html('0 words left');
			        limited = $.trim(text).split(" ", options.limit);
					limited = limited.join(" ");
					$(this).val(limited);
			    } else {
			        obj.next().html((options.limit - wordcount)+' words left');
			    } 
			});
			
			obj.trigger('keyup');
			
		});
	};
})(jQuery);

c.bavota

April 5, 2012 at 8:43 am

Thanks for the bug fixes.

Bruce Sparks

April 4, 2012 at 4:44 am

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
http://9pillsonline.com/

Similar Posts

18 comments for “Simple Textarea Word Counter jQuery Plugin”