Tag cloud
See my latest projects
About this site
This site is proudly powered by WordPress. If you like what you see, why not subscribe?
Copyright © 2008-2010 Aaron Russell. All rights reserved.
Tuesday, 21 July 2009
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.

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.
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
Last week I asked the question on Twitter, “What HTML element do you use for each line of a form? P, DIV, or something else?” So, how do you do your forms?
This years season of 24 ways article has come to a close and with it a reoccurring theme of controversy has arisen: designing in the browser. I offer my thoughts on why it misses the point.
The problem with CSS pre-processing frameworks is that they don’t really fit within the average web designers’ work flow. So I built an extension to LESS for creating cached stylesheets your PHP projects can use.
Are you a web designer or are you a web developer? Let me guess, you are a bit of both. Does that mean you are “doing it wrong”?
If you’re like me then your life revolves around email. Unfortunately the grip that email now has on all our lives creates as many problems as it solves. Learn how I control my Inbox.
“@JohnONolan have you got me mixed up with some other @aaronrussell or have I been sleep-tweeting again?”
Posted about 11 hours ago.
This site is proudly powered by WordPress. If you like what you see, why not subscribe?
Copyright © 2008-2010 Aaron Russell. All rights reserved.