Form field Limiter v2.0
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.
Demos:
Step 1: Add the below script to the <HEAD> section of your page:
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:
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.