Imx Fix in my experience
« prev next »

February 15, 2003 10:36 AM

On a mailing list last week someone asked about placing a maxlength on a <textarea> which most

HTML munkies will know is not a legal (or supported) attribute of that tag. Someone chimed in making that point and suggested that the person get familiar with the HTML 4.01 DTD. That advice is in the vein of 'if you teach a man to fish, you feed him for a lifetime.' I'm going to take the other tack and give the man a fish.

Most (all?) web browsers have onkeydown and onkeyup and onkeypress implemented as event handlers for the textarea tag. So we can use any of those to detect when a user is typing something into that field, and count the length of that field, and warn the user when they have passed an arbitrary maximum length that we choose. First, we make a <form>, a <textarea> and a place to show how many characters are remaining...

<form name="maxlength_test" action="who_cares" method="">
<TEXTAREA NAME="something" ROWS="10" COLS="50" onkeypress="textCounter(this,this.form.counter,255);"> </TEXTAREA> <br> <input type="text" name="counter" maxlength="3" size="3" value="255" onblur="textCounter(this.form.counter,this,255);"> chars remaining </form>

The form name doesn't matter because we use 'this' as a object model handle back to the form to operate on the elements within it. The name of the textarea does matter, so be sure you set that correctly. In the textarea, the onkeypress fires when a user pushes a key in and the key comes back up while typeing in the text area. The JavaScript function called "textCounter" gets a few variables passed to it. First, the textarea form object, the textarea's form object called 'counter' and a number. That number is the maximum length that the text area can be.

The function looks like this...

function textCounter( field, countfield, maxlimit ) {
  if ( field.value.length > maxlimit )
    field.value = field.value.substring( 0, maxlimit );
    alert( 'Textarea value can only be 255 characters in length.' );
    return false;
    countfield.value = maxlimit - field.value.length;

The function basically says if the textarea object that was passed in is longer than the number that was passed in, then set that textarea back to the length that we passed in, and alert the user about the maximum length. Otherwise, set the 'countfield,' which we passed into the function as "this.form.counter," to the maximum length minus the current length. Thus we get a count down.

And that's pretty much it. If you are using PHP or Mason or something, you can fill in the max length number in a variable, and let that get handled on an arbitrary basis. Pretty sweet. A working version of the text area is below, but first, note the following. I didn't write that JavaScript, Sprint did. I needed to set a max length of textarea for a project, so I found someone who did it already, and adapted it to my needs. This is a nice little bit of code that improves the usability of the form by informing you of any limits on data. Enjoy.

characters remaining

edit: Fixed entry that was truncated