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.

Demo Enter some text below.

HTML

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

Javascript

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;
  };
};

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.