Limiting Textarea Text

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.

Let's start by showing you how the script works. Here's a textarea for you to try it 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 we are actually doing is using the onkeyup javascript method to execute a javascript every time your visitor presses and releases a key on their keyboard (so that the input gets tested after every key press and not just after your visitor has finished writing a two thousand word essay in the field). This calls a javascript function that tests the length of the field and compares it to the maximum size that we specify and when that size is reached or exceeded the appropriate action is taken.

To start with, here's the code for our textarea field:

 <textarea cols="20" rows="2" value="" name="test" id="test" onkeyup="textLimit(this.form.test, 40);"></textarea>

You will notice that the name field, the id field, and the last part of the first argument being passed to the textLimit function all have the same name (in this case - test). For the routine to work these three values must be all the same although you can use whatever name that you want as long as you haven't used the name already for a different field within the same form. You will also notice that the second argument is the result of multiplying the number of cols by the number of rows. This is what creates the nice effect of having the maximum field size match the size of the field. If you use a different value for the second argument then that will be used as the maximum field size and your visitor will either be unable to fill the complete field (if you make it smaller) or the field will be scrollable (if you make it bigger).

So now let's move on to look at the javascript function. Here's the code that you need:

 function textLimit(field, maxlen) {
if (field.value.length > maxlen + 1)
alert('your input has been truncated!');
if (field.value.length > maxlen)
field.value = field.value.substr(0, maxlen);

Let's first consider the part of the javascript that is shown in bold. This code by itself tests if the length of the field (which was passed in the first parameter) is greater than the maximum field length (passed in the second parameter). If it is then the excess character(s) are removed from the end of the field. If your visitor had gone back to alter the earlier content of the field then once they enter enough for the last character of the field to drop off then their insertion point will be moved to the end of the field so they'll only lose one character off the end of their input before realizing that the field is full.

The additional two lines that are not in bold produce the message that is displayed when your visitor tries pasting something into the field and more than one character is lost when the field is truncated. This let's your visitor know that what they have tried to paste has made the content of the field much larger than is allowed and that the excess will be truncated. If you don't want a message in this instance then just omit these two lines. If on the other hand you prefer a message whenever the field is overflows (even by one character) then code the function like this instead:

 function textLimit(field, maxlen) {
if (field.value.length > maxlen) {
field.value = field.value.substr(0, maxlen);
alert('your input has been truncated!');
} }

Coding the function this way will always produce the message after the field is truncated whereas the earlier version produces the message before the actual truncation takes place.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow