/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Steve | http://jsmadeeasy.com/ */
function getObject(obj) {
  var theObj;
  if(document.all) {
    if(typeof obj=="string") {
      return document.all(obj);
    } else {
      return obj.style;
    }
  }
  if(document.getElementById) {
    if(typeof obj=="string") {
      return document.getElementById(obj);
    } else {
      return obj.style;
    }
  }
  return null;
}

function toCount(entrance,exit,text,characters) {
  var entranceObj=getObject(entrance);
  var exitObj=getObject(exit);
  var length=characters - entranceObj.value.length;
  if(length <= 0) {
    length=0;
    text='<span class="disable"> '+text+' </span>';
    entranceObj.value=entranceObj.value.substr(0,characters);
  }
  exitObj.innerHTML = text.replace("{CHAR}",length);
}

.minitext {
  font: normal 0.7em Arial, sans-serif;
  color: Black;
}

.disable {
  background-color: #CF110C;
  color: #fff;
  font-weight: bold;
  padding: 5px;
}

<script type="text/javascript" src="characterCounter.js"></script>

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div> <form action="#" method="post"> <table align="center" border="0" cellspacing="1" cellpadding="5"> <tr> <td align="right"><span class="options">Field Name</span></td> <td class="2"> <input type="text" id="eBann" name="bannerURL" maxlength="100" size="60" onKeyUp="toCount('eBann','sBann','{CHAR} characters left',100);"> <br> <span id="sBann" class="minitext">100 characters left.</span> </td> </tr> </table> </form>