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('Max. '+options.limit+' words'); obj.keyup(function() { text = obj.val(); if(text === "") { wordcount = 0; } else { wordcount = $.trim(text).split(" ").length; } if(wordcount > options.limit) { $("#counter-text").html('0 words left'); 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:
That would give you a textarea box that looks like this: