Tuesday, 21 July 2009

jQuery plugin released: Simply Countable

A couple of weeks ago I threw together a simple jQuery plugin that provides a character or word counter for any textarea or input field form element.

jQuery Simply Countable plugin

The plugin’s options allow you to specify whether it counts characters or words, set a maximum character or word limit and choose the direction in which the counter counts (ie, from the maximum count down to zero, or vice versa).

The plugin can be downloaded from my Github repository: jQuery Simply Countable plugin.

Full documentation of the various options is included in the README file, and a demo HTML file is bundled with the download.

I have a few other scripts and plugins on in my Github repository so feel free to check it out. With the forthcoming redesign to this site I’ll get round to finding a home for them here too.

6 fantastic comments

Useful and easy plugin. But I think it would be nice if you could add a function, that limits the chars/words in the textarea to the maxCount var, maybe by removing the letters higher than maxVCount in a nice animated manner.
Hope you got the idea, my english is not so ggod.

I tried something out:

after

else var count = options.maxCount – countable.val().length;

I inserted

/* Just a try */
var thecontent = countable.val();
if (count < 0){
countable.val(thecontent.substring(0,options.maxCount));
} else {
countable.val(thecontent);
}

Works for me, but I am by no means a programmer. I am sure there is a much nicer way to do that

Cheers Elvis. That’s a good idea, although I think that behaviour should be optional. When I next work on the plugin I’ll try and add such an option.

Thanks.

Nice plugin, thanks for sharing! It works pretty well.
Just one minor issue, I think.
I was having a “countable.val is undefined” error, so I fixed it doing the folowing (my JS sucks, so feel free to do it the correct way)

if (options.countType === ‘words’ && typeof countable.val() != ‘undefined’){
var count = options.maxCount – countable.val().split(/[\s]+/).length;
if (countable.val() === ”) count += 1;
}
else if (options.countType === ‘characters’ && typeof countable.val() != ‘undefined’) {
var count = options.maxCount – countable.val().length;
}

Just to learn, do you spot any possible issue (crossbrowsing issues?) with that solution?

Thanks again!

@Maniqui – Many thanks for letting me know about the val is undefined error. I presume that’s happening in Internet Explorer? Either way I’ll look into it and get a fix put into the source code. Thanks again.

I really love using your simplyCountable plugin for my textareas, but I ran into a little problem. If I make some paragraphs in a textbox with the enter key, one character less is shown in the box with characters left. At server-side validation this isn’t true, because the paragraphs are reproduced as something like “\r\n” in the string. How could I manage, that this is considered in the box with characters left? Thank you for your help! Andreas

What are your thoughts?