Note: Updated Feb 25th, 09'. Script rewritten for various improvements.
Description: Want to limit the amount of text a user can enter
in particular INPUT type="text" or TEXTAREA elements? Well, this script
enables not only that, but displays in real time the number of characters remaining.
A callback function enables you to define your own actions when the field limit
has been reached, such as apply a red border around the field in question.
Step 1: Add the below script to the <HEAD> section of
your page:
<script type="text/javascript" src="formfieldlimiter.js">
/***********************************************
* Form field Limiter v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
</script>
The above references the following .js file, which you should download: formfieldlimiter.js.
Step 2: Then, insert the below sample form onto your page,
which contains two sample fields- a text and textarea field- with the script
applied to them:
<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>
Customization
To apply the script to any INPUT type="text" or TEXTAREA within a form,
call fieldlimiter.setup() with the desired settings following the field's HTML,
for example:
<form name="sampleform"">
<input type="text" name="george" style="width:250px"
/>
<div id="george-status"></div>
</form>
<script type="text/javascript">
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
//define custom event actions here if desired
}
})
</script>
A good place to call fieldlimiter.setup() if you wish to consolidate things
is at the very end of your document. The setting "thefield" should
be a reference to the desired form field, which you can do either by name (ie:
document.formname.fieldname), or if it contains an ID attribute, by ID if you
like (ie: document.getElementById("george"). The setting "statusids"
allows you to define a list of container IDs that will display in real time
the number of characters left for the form field. Make sure the actual container(s)
is defined on the page, such as <div id="george-status"></div>.
onkeypress event handler
The final setting, "onkeypress", makes it possible to define custom
code that is fired each time the user presses a key inside the form field in
question. Together with a couple of parameters entered into it, plus the "this"
keyword inside the function that returns a reference to the form field, you
can, for example, perform a certain action whenever the user has reached the
field's limit:
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"
}
The parameters "maxlength" and "curlength" informs you
of the field limit plus current number of characters entered, respectively.
The "this" keyword returns as a DOM object the form field in question.
In the above example, the field gets a red border whenever the user has exceeded
the limit.
[+/-] More...
[+/-] Hide...
