Textarea char counter, a jQuery plugin

amelandri — Tue, 20 Oct 2009 16:08:34 +0000

Some weeks ago I received a customer request to add a character counter to a textarea field and I made it using “classic” Javascript. Now that I’m learning jQuery and have some spare time, I tryed to transform my custom function to a jQuery plugin.

This is my first attempt to build a jQuery plugin and maybe there’s already another plugin that does the same thing but it have been a really nice exercise.

Check out the plugin code and some more details after the break.

This plugin will give you the method setCounter([maxLength]). If you call it on a textarea field you will get a counter that gets updated every time the user write a character.

The maxLength parameter is not mandatory so if it’s undefined you will get a simple character counter like this:

<div id="textareaId_counter">
  <span class="length">27</span>
</div>

while if you pass an integer to the method the user won’t be able to write a number of character greater than maxLength and you will get a counter like this:

<div id="textareaId_counter">
  <span class="length">27</span>
  <span class="sep">/</span>
  <span class="maxLength">500</span>
</div>

This is the code. Save it in a text file named something like jquery.textareaCharacterCounter.js and include it in your page:

jQuery.fn.setCounter = function(maxLength){
 
  return this.each(function(){
 
    var jqthis = jQuery(this);
 
    if (jqthis.is('textarea')){
 
      var counterId = jqthis.attr('id') + "_counter";
 
      var htmlCounter = '+ counterId + '">';
      htmlCounter += '' + jqthis.val().length + '';
 
      if (maxLength){
        htmlCounter += '/';
        htmlCounter += '' + maxLength + '';
      }
 
      htmlCounter += '
';
 
      jqthis.after(htmlCounter);
 
      jQuery('#'+counterId).width(jqthis.width()).css({
        'text-align':'right',
        'margin-top':'10px'
      });
 
      jqthis.bind("keyup",function(){
 
        var content = jqthis.val();
 
        if (maxLength && content.length > maxLength){
          content = content.substring(0,maxLength)
          jqthis.val( content );
        }
 
        jQuery('#' + counterId + " > span.length").text(content.length);        
 
      });
 
    } else {
      alert("Not applicable to element: " + jqthis);
    }
  });
}

How to use it

// Add a simple counter
$('#textarea1').setCounter();
 
// Add a counter and set maximum length to 500 characters
$('#textarea2').setCounter(500);

Selective Javascript Loader 1.1

amelandri — Mon, 14 Sep 2009 09:11:46 +0000

I’ve just update the Selective Javascript Loader plugin with some bugfixes and improvements:

Added the option to choose if Javascript files should be included in the header or in the footer of the page. This option is available only if you are using WordPress 2.8 and above
Added WordPress version checking.
Corrected script inclusion for WordPress 2.7
Some code optimization
Corrected a layout bug in the settings page

Selective Javascript Loader

amelandri — Sun, 13 Sep 2009 17:16:49 +0000

I’ve just released Selective Javascript Loader my first WordPress plugin. It’s a very simple plugin that automatically loads different Javascript files based on the blog section that is being viewed (index, category, single post, page).

It can be really useful if you make extensive use of Javascript in your theme and want to split the code and load functions only when you need them.

Check it out!

Alessandro Melandri » plugin

Textarea char counter, a jQuery plugin

How to use it

Selective Javascript Loader 1.1

Selective Javascript Loader