Post image for Live Character Count with Progress bar using Jquery

Live Character Count with Progress bar using Jquery

by Hyder

in Jquery

I am sure you have probably come across a site in which it shows you the Remaining amount of characters when you are typing into a textarea.One popular website where i have seen this is Youtube. If you have ever wondered how to do such a thing then this tutorial is for you :) .A  TextArea character counter informs your visitors the number of characters they can type in. The counter will update itself when each character is typed into the textarea. There is a lot of tutorial out there to show you how you can implement a character count meter but wait, this one will show you one more cool stuff to “wow” your visitors .As you type in the textarea , A progress bar will keep increasing until the maximum amount of text is entered in the textarea .If the limit is reached , the progress bar will change from blue to yellow . This Character Count Progress bar is done using Jquery .

To make the text area look nicer, an “Auto Expand” Effect will be added to the textarea when a user clicks into the TextArea.

Before getting dirty into code, you can view a lime demo or download the source code using the appropriate links below.

View Demo || Download Character Counter Source Code

Adding some CSS Style to the Page :

#text_area_input {
	font-family:Arial, Helvetica, sans-serif;
	border-color:#AEAEAE #BBBBBB #BBBBBB;
	border-top:2px solid #E8E8E8;
#progressbar {
#barbox {
	border:solid 2px #000;
#count {
	font-family:'Georgia', Times New Roman, Times, serif;

Code for Counting Remaining Characters and Progress bar :

The code below shows how to capture the length of characters entered into the textarea and calculation of  the progress bar value. The latter is simply a div with background blue with an increasing css width property( Calculated in percentage ). The width keeps changing based on the number of characters entered by the user.

 $(document).ready(function()//When the dom is ready

//Detect keypress in the textarea

var text_area_box =$(this).val();//Get the values in the textarea
var max_numb_of_words = 200;//Set the Maximum Number of characters
var main = text_area_box.length*100;//Multiply the lenght on words x 100

var value= (main / max_numb_of_words);//Divide it by the Max numb of words previously declared
var count= max_numb_of_words - text_area_box.length;//Get Count of remaining characters

if(text_area_box.length <= max_numb_of_words)
$('#progressbar').css('background-color','#5fbbde');//Set the background of the progressbar to blue
$('#count').html(count);//Output the count variable previously calculated into the div with id= count
$('#progressbar').animate(//Increase the width of the css property 'width'
'width': value+'%',
}, 1);//Increase the progress bar

Making sure the Character count does not go beyond the limit specified :

If a user tries to enter more than 200 characters ,any excess will be removed using substr()  function and the progressbar will change color .

//If More words is typed into the textarea than the specified limit ,
//Change the progress bar from blue to yellow
var remove_excess_characters =text_area_box.substr(0,max_numb_of_words);

//Remove the excess words using substring

return false;


Adding the Auto Expand Effect on clicking into the textarea

The code below will dynamically set the height of the Textarea to 75 pixels when the user clicks into the textarea.

$(this).animate({'height': '75px',}, 'slow' );//Expand the textarea on clicking on it

return false;

That’s all !  Feel free to download the source code using the appropriate links below and tweak it according to your needs .So how are you going to use this? Do you think it lacks something? Do not hesitate to leave any feedback below.

Related Posts

  1. Create fancy contact form with CSS 3 and jQuery
After Post

{ 17 comments… read them below or add one }

wadja April 26, 2010 at 8:50 pm

Thanks a lot for this.

I didn’t know Jquery was so sweet.

I hv been discouraged a couple of times concerning Jquery bt with this script here – i wanna learn it now.

Could u pls tell me the best place to learn Jquery ?

Thanks a lot.


Hyder April 28, 2010 at 1:32 pm

Hello wadja ,
Personally i started learning jquery from the book “jQuery 1.3 with PHP” just to grasp the basic concept of it but most of my research i use google :) . If you feel comfortable with ebooks,i would probably recommend you to start with “jQuery: Novice to Ninja ” . ( I wish i started learning Jquery from this book ! ) .
Or if you prefer to learn online, i would recommend you to start here :

P.S :
jQuery is not a new language .you need a basic knowledge of javascript and CSS to start learning JQuery .


Rob May 27, 2010 at 7:53 pm


does this work, in IE 6.0 and above? I tested it and I get ” Expected identifier, string or number line 28″ which is “width”: value+’%',
}, 1);//Increase the progress bar

any help will be appreciated.


Hyder May 27, 2010 at 8:05 pm

Rob i don’t have IE installed right now . my best guess would be to remove the comma on this line of code :

{'width': value+'%',}, 1);//Increase the progress bar

After removing The comma :

{'width': value+'%'}, 1);//Increase the progress bar

Let me know if it works :)


Rob May 28, 2010 at 1:05 am


it was to remove the comma from two places. below is the lines in the code that worked for me in IE.


{"width": value+'%'}, 1);//Increase the progress bar


 $(this).animate({"height": "75px"}, "slow" );//Expand the textarea on clicking on it


Hyder May 28, 2010 at 10:24 am

great Rob ! I will have to update the code .


Ghulam Hussain June 1, 2010 at 7:02 am

This J query is not working on IE 7


Hyder June 1, 2010 at 8:46 am

Ghulam , check out Rob comments above . This will solve the issue .


Ghulam Hussain June 2, 2010 at 5:23 am

Mr.Hyder and Mr.Rob,
I remove the coma but this code is not working for IE7, please check the code for IE7.


Arthur June 28, 2010 at 2:35 pm

Thanks! It is really awesome!!! And by the way It works fine in IE 7 after fixing comas.


Vasile August 10, 2010 at 12:38 pm

text_area_box.length is not taking care to the end of line separator, which is stored (for Window$) in 2 characters !


akuba September 28, 2010 at 11:05 am



Anderson November 11, 2010 at 1:55 pm

Won’t you update the downloadable code?
This doesnt work in IE…

I had to modify this line:
{“width”: value+’%',},
{“width”: value+’%'},
I removed the coma afeter ‘%’ and it worked fine.

Thank you!


Adrian March 11, 2011 at 4:05 pm

Nice. I’m a jQuery novice, so forgive the simpleton question. How easy would this be to adapt a) to do word count rather than character count and b) to alter the CSS output – for example, have the textarea background change color rather than display a separate progress bar, or output a tool-tip style alert? I have an idea for altering rgba values as the length of the message increases :)



domi June 8, 2011 at 9:38 pm

is it just me or does the textarea lose the focus after animating it? I have to click into the textarea again.

but thanks for the example! nice job!


Lebanon Pictures October 10, 2011 at 8:44 am

very nice one , if you don’t mind i wanna put that on my website


No November 21, 2011 at 4:39 am

Great Work Mate, Only thing is when i keep my one key pressed, it breaks down, i think it needs some kind of timeout functionality, not sure but just a guess


Leave a Comment

Previous post:

Next post: