HTML form character counter

I've got this Javascript function which stops you from typing any more than X characters but what I'd like to do is actually display the characters going up as the person types.

The url to what works now is www.weirfire.co.uk/form.php

and the code I've got so far is

<script language="JavaScript">
maxKeys = 100;
keysSoFar = 0;
alerted = false;

function keyup(what) {
    keysSoFar++;
    if (keysSoFar > maxKeys) {
        if (!alerted) alert('That\'s enough!');
        what.value = what.value.substring(0,maxKeys-1); // chop the last typed char
        alerted = true;
    }
}
</script>

<form>
<textarea cols=100 rows=20 onChange="change(this)" onKeyUp="keyup(this)"></textarea>
</form>

Code (markup):

 

okay I've found another solution

<script type="text/javascript">
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 Counter(start,end,text,characters) {
  var startObj=getObject(start);
  var endObj=getObject(end);
  var longitude=characters - startObj.value.length;
  if(longitude <= 0) {
    longitude=0;
    text='<span class="disable"> '+text+' </span>';
    startObj.value=startObj.value.substr(0,characters);
  }
  endObj.innerHTML = text.replace("{CHAR}",longitude);
}
</script>


<form action="#" method="post">
<table align="center" class="0" border="0" cellspacing="1" cellpadding="5">
  <tr>
    <td class="2">
<INPUT TYPE="TEXT" class="text" id="eBann" name="bannerURL" maxlength="100" size="60" 
onKeyUp="Counter('eBann','sBann','{CHAR} characters left.',100);"><br>
<span id="sBann" class="minitext">100 characters left.</span></td>
  </tr>
</table>
</form>

Code (markup):

That seems to do the trick

 

In the getObject function, if obj, is not a string, you should probably return obj and not obj.style

 

Thanks for the tip D

 

No prob. You could also add some more cross-browser compatibility by including document.layers to the function as exemplified here: http://www.webcodingtech.com/javascript/get-object-by-id-compatible.php

 

Now you're just showing off!

 

Showing off would be giving you this link http://www.webcodingtech.com/javascript/limit-input-text.php

 

thanks guys I was in need of such code

 

You're welcome kashem. Donations are welcome!