Simple Textarea Word Counter jQuery Plugin
by Bandicoot Marketing on | Posted in Downloads | 18 comments
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:
18 comments for “Simple Textarea Word Counter jQuery Plugin”