1. Technology

Limiting Textarea Text

1. Introduction and Sample

Join the Discussion

Questions? Comments?

More of this Feature

The Script

Unlike input fields where you can use a maxlength sub-parameter to specify the maximum field length, there is no way using just html to restrict the length of a textarea field. Instead, you need to use javascript to test the length of what the user has entered as they enter it and stop accepting their input when they have reached your limit.

Here's a textarea for you to try this out with.

Please enter some text here.

(Maximum of 40 characters please).

As you can see, once you have typed 40 characters in the above field the field content stops changing. If you paste something into the field that is longer than 40 characters it is not only truncated to 40 characters but a message is also displayed to advise that the field has been truncated (setting a maxlength on an input field isn't that kind to the visitor).

So why is the above field limited to 40 characters? It's not the message on the line below that does it, that's just being friendly to your visitor by letting them know in advance how big the field is. It's also got nothing to do with the fact that the field is twenty characters wide and two rows high even though 20x2=40 and so the field can display 40 characters. Under normal circumstances the field content would start scrolling once the display area had been filled (as in fact will happen if shift-enter is used to start new lines of text rather than just filling the entire field with characters).

What is actually performing this for us is a Javascript function attached to the field.

Sample Page | The Script

©2014 About.com. All rights reserved.