What is the best way to limit the amount of text that can be entered into a 'textarea'?

Question

What is the best way to limit the amount of text that a user can enter into a 'textarea' field on a web page? The application in question is ASP .NET, but a platform agnostic answer is preferred.

I understand that some amount of javascript is likely needed to get this done as I do not wish to actually perform the 'post' with that amount of data if possible as ASP .NET does have an upper limit to the size of the request that it will service (though I don't know what that is exactly).

So maybe the real question is, what's the best way to do this in javascript that will meet the following criteria:

-Must work equally well for both users simply typing data and copy/paste'ing data in from another source.

-Must be as '508 compliance' friendly as possible.

Answer 1

The most userfriendly idea seems to me a solution like the Twitter-one. Provide a visual indication that the user has crossed the maximum but don't limit him in typing.

Whatever javscript you use, you will still have to validate at the server end. Users with Javascript disabled will otherwise be able to circumvent your limit.

Answer 2

use a RegularExpressionValidator Control in ASP.Net to validate number of character along with with usual validation

Answer 3

As Javache said, you'll still have to check server side. We've been using the jQuery validator plugin which has support for Max lengths amongst tones of other stuff...

Answer 4

function limit(element, max_chars)
{
    if(element.value.length > max_chars)
     element.value = element.value.substr(0, max_chars);
}

As javascript, and...

<textarea onkeyup="javascript:limit(this, 80)"></textarea>

As XHTML. Replace 80 with your desired limit. This is how I do it anyway.

Note that this will prevent the user from typing past the limit in the textbox, however the user could still bypass this using javascript of their own. To make sure, you must also check with your server side language.

Answer 5

I use this, where the limit is a must. It also provides the user with the number of characters left.

function CountLength(vControl)
 {
  var strValue = vControl.value;
  var vMax = 480;
  var vLeft = vMax - strValue.length;
  if (vLeft < 0)
  {
   vLeft = 0;
  }
  var vMessage = returnObjById('TextCounter');
  if (document.all)
  {
   vMessage.innerText = vLeft + ' characters remaining.';
  }
  else
  { 
   vMessage.textContent = vLeft + ' characters remaining.';
  }
  if (vLeft == 0)
  {
   vControl.value = vControl.value.substring(0, vMax);
  }
 }

Answer 6

jQuery also provides some options here. Options, options, and options.