Dynamic Drive DHTML scripts- Form field Limiter

Form field Limiter

Author: Dynamic Drive

Note: Updated Dec 7th, 04'. Script now supports input either by form element's name or ID.

Description: Want to limit the amount of text a user can enter in particular INPUT or TEXTAREA elements? Well, this script enables not only that, but displays in real time the number of characters remaining. An extremely practical and useful script that functions in both IE4+ and NS6+!

Demo: Try typing in the below form.

Directions:

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

Select All
<script type="text/javascript"> /* Form field Limiter script- By Dynamic Drive For full source code and more DHTML scripts, visit http://www.dynamicdrive.com This credit MUST stay intact for use */ var ns6=document.getElementById&&!document.all function restrictinput(maxlength,e,placeholder){ if (window.event&&event.srcElement.value.length>=maxlength) return false else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){ var pressedkey=/[a-zA-Z0-9\.\,\/]/ //detect alphanumeric keys if (pressedkey.test(String.fromCharCode(e.which))) e.stopPropagation() } } function countlimit(maxlength,e,placeholder){ var theform=eval(placeholder) var lengthleft=maxlength-theform.value.length var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder) if (window.event||e.target&&e.target==eval(placeholder)){ if (lengthleft<0) theform.value=theform.value.substring(0,maxlength) placeholderobj.innerHTML=lengthleft } } function displaylimit(thename, theid, thelimit){ var theform=theid!=""? document.getElementById(theid) : thename var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> characters remaining on your input limit' if (document.all||ns6) document.write(limit_text) if (document.all){ eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)} eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)} } else if (ns6){ document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true); document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true); } } </script>

Step 2: Insert the below sample form onto your page, which also demonstrates how to associate the script with your own form:

As shown, enabling the script on a particular form element is a simple process:

<input type="text" name="george"><br>
<script>
displaylimit("document.sampleform.george","",8)
</script>

Simply add the code in blue directly beneath the form element in question. Function displaylimit() within accepts the following three parameter:

displaylimit("document.formname.elementname", "elementID", "characterslimit")

For the first parameter, enter the path to the form element being limited, whereby "formname" is the name of the form, and "elementname", the name of the element. Enter a blank string ("") instead if 2) below is entered. *
For the second parameter, enter the ID of the form element in question. This provides an alternate way for you to reference your form element instead of using its name in 1). Enter a blank string ("") instead if 1) above is entered. *
For the third parameter, enter the number of characters the form element should be limited to.

* Useful information

The 1) and 2) parameters of displaylimit() above allow you to reference your form element via two different ways- either using its name or ID. This is extremely useful if your form elements do not contain unique names, in which using their IDs is the only way to reference each one. For example, in many PHP forms, the names of form elements need to be arrays, such as:

<input type="text" name="survey[]">
<input type="text" name="survey[]">
<input type="text" name="survey[]">

Since "survey[]" is a shared and non unique name, passing it in as the first parameter of the function will not work. The solution is simply to assign each textbox with a unique ID attribute, and pass that value in instead for each textbox.