How to make live character count meter using JQuery

Hello, this is my first post on this blog. In this tutorial I would like to explain how to count the characters on key press (live typing) event using jquery. Key up function in JQuery is used for Live Character Count System.

Key up function in JQuery works when the key is released while typing on the keyboard. I used key up function to the textbox as it counts the number of characters when the key release event is triggered.

textcontent is the ID of the textbox. $("#textcontent").keyup() executes the function when the key up event is triggered.
textcontent=$(this).val() gets the current value from the textbox.
textcontent.length counts the number of characters in the textbox.
120 - textcontent.length gives the remaining number of words that can fit into the textbox. Here you can change this to any number that wish to. Since I used 120 in this code, it takes only 120 characters from the input. If the number of characters exceeds more than 120, it displays 0 and show a meesage "Full".

The progress bar will display the length of characters as progress meter.

<script type="text/javascript">

$(document).ready(function()

{

$("#textcontent").keyup(function()

{

var textcontent=$(this).val();

var full = textcontent.length *100;

var value= (full / 120);

var count= 120 - textcontent.length;

if(textcontent.length <= 120)

{

$('#full').html('');

$('#count').html(count);

$('#progressbar').animate(

{

"width": value+'%',

}, 1);

}

else

{

$('#full').html(' Full ');

}

return false;

});

});

</script>

Here is the CSS code:

<style>

#progressbar

{

background-color:#043d44;

width:0px;

height:16px;

}

#progressdiv

{

background-color:#FFFFFF; 

width:100px; 

border:1px solid #111; 

}

#count

{

float:right; margin-right:8px; 

font-size:16px; 

font-weight:bold; 

color:#666666

}

#textcontent

{

width:500px; height:100px;

}

</style>

Simple HTML code to display the textbox along with Progress meter and character count.

<div style="width:500px;">

<div id="count">120</div><div id="full"></div>

<div id="progressdiv"><div id="progressbar"></div></div>

<br />

<textarea id="textcontent"></textarea>

</div>