Live Character Counter as in Twitter using Jquery
anoopsachari | May 29, 2010 | Comments 0
In this tutorial i would explain how to implement live character counter using Jquery . I have included a live demo and the complete source code .
The package contains only a single file with 3parts a css part , javacript part and an html part
#bar
{
background-color:#5fbbde;
width:0px;
height:16px;
}
#barbox
{
float:right;
height:16px;
background-color:#FFFFFF;
width:100px;
border:solid 2px #000;
margin-right:3px;
-webkit-border-radius:5px;-moz-border-radius:5px;
}
#count
{
float:right; margin-right:8px;
font-family:'Georgia', Times New Roman, Times, serif;
font-size:16px;
font-weight:bold;
color:#666666
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
Include jquery.js before you use the script .
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;
if(box.length <= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert(' Full ');
}
return false;
});
});
<div style="width:470px;margin-top:100px;"> <div id="count" align="right">145</div> <div id="barbox"><div id="bar"></div></div> </div> <strong><lable>Enter Text : </label><strong><textarea id="contentbox"></textarea>
You are done !
Filed Under: javascript
About the Author: a holistic web developer , movie buff and technical blogger from queen of arabian sea.






