New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE6+ Opera 7+

Form field Limiter v2.0

Author: Dynamic Drive

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:


Directions: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

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:

Select All

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.