CSS Codes
CSS Layouts

<html>

<head>

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

/***********************************************
* Form field Limiter v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>

</head>

<body>

<form name="sampleform"">

<input type="text" name="george" style="width:250px" />
<div id="george-status"></div>

<p>
<textarea name="johndoe" id="johndoe" cols="30" rows="5" style="width:250px"></textarea>
<div id="john-status"></div>

</form>

<script type="text/javascript">

//Example 1:

fieldlimiter.setup({
thefield: document.sampleform.george, //reference to form field
maxlength: 10,
statusids: ["george-status"], //id(s) of divs to output characters limit in the form [id1, id2, etc]. If non, set to empty array [].
onkeypress:function(maxlength, curlength){ //onkeypress event handler
if (curlength<maxlength) //if limit hasn't been reached
this.style.border="2px solid gray" //"this" keyword returns form field
else
this.style.border="2px solid red"
}
})

//Example 2:

fieldlimiter.setup({
thefield: document.getElementById("johndoe"), //reference to form field
maxlength: 30,
statusids: ["john-status"], //id(s) of divs to output characters limit. If non, set to empty array [].
onkeypress:function(maxlength, curlength){ //onkeypress event handler
//define custom event actions here if desired
}
})

</script>

</body>
</html>