Question

Possible Duplicate:
What is the best way to emulate an HTML input “maxlength” attribute on an HTML textarea?

My question is can a <textarea > be configured only to accept a certain number of characters? I can do this in the following JavaScript, but the person for whom I am designing this page does not want a status field.

My current way of doing things is I have a <textarea > that is part of a form that uses a nice JavaScript function to fill a message in a status box.

I also read SO and found Alerts and sounds really aren’t the way to alert people, so the following code changes background color (and restores when appropriate) when there is an error.

Here is that code:

// Checks Form element TransDesc for overruns past 255 characters.
function warnOverDescLen()
{
  var misc_text  = 
  document.forms["InvGenPayTickets"]["TransDesc"].value;
  var alert_text = 
  "You cannot enter more than 255 characters. Please remove some information.";

  var rc = true;

  if(255 < misc_text.length)
  {
    document.forms["InvGenPayTickets"]["trans_status"].value 
      = alert_text;

    misc_text = misc_text.substring(0, 253);

    document.forms["InvGenPayTickets"]["TransDesc"].value 
      = misc_text;

    document.forms["InvGenPayTickets"]["trans_status"].style.backgroundColor 
      = "pink";
  }
  else
  {
    document.forms["InvGenPayTickets"]["trans_status"].value 
      = "";
    document.forms["InvGenPayTickets"]["trans_status"].style.backgroundColor 
      = "lightgoldenrodyellow";
  }

  return rc;
}

<textarea rows="4" cols="60" name="TransDesc" id="TransDesc" 
onkeypress="return warnOverDescLen();" ></textarea>

<span style="color: #50081E; font-weight: bold">Status</span>
<br />
<input type=text name="trans_status" id="trans_status" maxwidth="50"
size="65" />

Answer 1

This is a solution for HTML5, not supported by IE9 or earlier (according to this):

<textarea maxlength="255"></textarea>

Since you probably can’t drop support for IE9 (and maybe even IE8), it’s recommended you couple that with JavaScript, preventing the default behavior for the keydown and paste events on the textarea, as standup75 suggested.

Here is how to do that with plain JavaScript:

<textarea id="txtarea" maxlength="255"></textarea>
<script>
var field = document.getElementById('txtarea');
if(field.addEventListener) {
    field.addEventListener('keydown', enforceMaxlength);
    field.addEventListener('paste', enforceMaxlength);
} else {
    // IE6-8
    field.attachEvent('onkeydown', enforceMaxlength);
    field.attachEvent('onpaste', enforceMaxlength);
}

function enforceMaxlength(evt) {
   var maxLength = 255;
    if(this.value.length >= maxLength) {
        evt.preventDefault()
    }
}
</script>

http://jsfiddle.net/snJwn/