TEXTAREA Max length check

Introduction

Article describes how to limit the number of allowed characters in textarea.

Background

TextBox has maxlength attribute to limit the number of allowed characters. But TextArea does not have any attributes to control that. We will use simple javascript to control it.

Using the code

We will write two function handlers to handle keypress and paste

//
// Any source code blocks look like this

  function maxLength(field,maxChars)
 {
       if(field.value.length >= maxChars) {
          event.returnValue=false;
          return false;
       }
 }  

 function maxLengthPaste(field,maxChars)
 {
       event.returnValue=false;
       if((field.value.length +  window.clipboardData.getData("Text").length) > maxChars) {
         return false;
       }
       event.returnValue=true;
 }

//

maxLength() will be used for keypress event and maxLengthPaste will be used for onPaste event.

Add this code to your html or generate this code

<textarea rows="5" cols="6" onKeyPress='return maxLength(this,"30");' onpaste='return maxLengthPaste(this,"30");'></textarea>

It won't allow you to enter more than 30 chars, same time it will not allow you to paste more than 30 chars.

You can change the code to alert the user to recheck their data. Just insert an alert message before return false statement.

//
// Any source code blocks look like this

  function maxLength(field,maxChars)
 {
       if(field.value.length >= maxChars) {
          event.returnValue=false; 
          alert("more than " +maxChars + " chars");
          return false;
       }

 }  

 function maxLengthPaste(field,maxChars)
 {
       event.returnValue=false;
       if((field.value.length +  window.clipboardData.getData("Text").length) > maxChars) {
         alert("more than " +maxChars + " chars");
         return false;
       }
       event.returnValue=true;
 }

//

If you do not want to pass the field as an argument to the function, you can take it from event object.

var field=  event != null ? event.srcElement:e.target;

You can refer to my other article "Change Background color of current focus element" to assign global event handler. In that case, you do not need to pass maxLength as an argument, make it as an attribute, so that you can register global handler for textarea and use maxLength attribute of the field to validate the length.

<script language="javascript">
function attachEvent(name,elementName,callBack) {
    var element = elementName;
    if(typeof elementName == 'string') 
      element = document.getElementById(elementName);
    }
    if (element.addEventListener) {
      element.addEventListener(name, callBack,false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + name, callBack);
    }
}
function maxLength()
 {
 
       var field=  event != null ? event.srcElement:e.target;
       if(field.maxChars  != null) {  
         if(field.value.length >= parseInt(field.maxChars)) {
           event.returnValue=false; 
           alert("more than " +field.maxChars + " chars");
           return false;
         }
       }
 }  

 function maxLengthPaste()
 {
       event.returnValue=false;
       var field=  event != null ? event.srcElement:e.target;
       if(field.maxChars != null) {
         if((field.value.length +  window.clipboardData.getData("Text").length) > parseInt(field.maxChars)) {
           alert("more than " +field.maxChars + " chars");
           return false;
         }
       }
       event.returnValue=true;
 }
</script>

Generate or create this html

<textarea rows="5" cols="6" maxLength="30" id="textarea1"></textarea>

<script language="javascript">
  attachEvent("keypress","textarea1",maxLength);
  attachEvent("paste","textarea1",maxLengthPaste);
</script>


or you can assign gloabl handler
<script language="javascript">

function setTextAreaListner(eve,func) {
   var ele = document.forms[0].elements;
   for(var i = 0; i <ele.length;i++) {
    element = ele[i];
    if (element.type) {
      switch (element.type) {
        case 'textarea':
        attachEvent(eve,element,func);
       }
     }
  }
}
</script>
<script language="javascript">
 setTextAreaListner("keypress",maxLength);
 setTextAreaListner("paste",maxLengthPaste);
</script>

For netscape clipboard manipulation, refer to this forum

http://www.gamedev.net/community/forums/topic.asp?topic_id=281951