Home Blog Work

Character Count On Fly Using JavaScript

Published on January 11, 2013

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


Demo Enter some text below.


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


window.onload = function() {
  var txtCount = document.getElementById('txtCount'),
    info = document.getElementById('info');
  //This will remove if any space chars onload.
  txtCount.value = '';
  txtCount.onkeydown = function() {
    info.innerHTML = this.value.length + 1;


.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.