Techumber

Character Count On Fly Using JavaScript

Github avatar
Dimpu
January 11, 2013. 2 min read

I think SEO is the part of blogging. One of the SEO technique is submitting our blog to different blog directories. Here comes the real problem different blog directories allows different length of blog description. Say some 256 character. So I have created this little tiny JavaScript Character Count script. Character Count On Fly Using JavaScript

Download

Demo Enter some text below.

HTML

<section class="contant">
<textarea id="txtCount" autofocus="autofocus">
</textarea>
<div id="info"></div>
</section>

Javascript

<script type="text/javascript">
//<![CDATA[
window.onload=function(){
var txtCount=document.getElementById('txtCount')undefined
info=document.getElementById('info');
//This will remove if any space chars onload.
txtCount.value="";
txtCount.onkeydown=function(){
info.innerHTML=this.value.length+1;
};
};
//]]>
</script>

Style

.contant{
text-align: center;
}
textarea{
border: 1px solid #ddd;
border-radius: 6px;
width: 500px;
height: 200px;
padding: 4px;
line-height: 17px;
font-size: 17px;
outline: none;
}
#info{
text-align: center;
background-color: #333;
width: 0px;
height: 16px;
position: relative;
width: 100px;
border: solid 2px #888;
margin: 0 auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: white;
}

That’s it.


...