Add maxlength functionality to textarea

The textarea field doesn’t have a maxlength attribute like text fields, so you need Javascript to get the same functionality:

function getMaxLength(textarea,maxlength){
 
  if (textarea.value.length > maxlength)
    textarea.value = textarea.value.substring(0,maxlength);
 
  updateCounter(textarea.value.length,maxlength);
}
 
function updateCounter(currentCount,maxlength){
  document.getElementById('counter').innerHTML = currentCount + "/" + maxlength;
}

Now modify the textarea like this and you are done:

<form>
  <textarea onkeyup="return getMaxLength(this,500)" cols="60" rows="10"></textarea>
<div id="counter">0/500</div>
</form>

28 May 2009     Tech

Leave a Reply