HTML form character counter

[Weirfire]

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>

[Weirfire]

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>



That seems to do the trick :)

[exam]

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

[Weirfire]

Thanks for the tip D :)

[exam]

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

[Weirfire]

Now you're just showing off! :P

[exam]

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

[kashem]

thanks guys I was in need of such code

[Weirfire]

You're welcome kashem. Donations are welcome! ;)