Alessandro Melandri » HTML http://www.melandri.net J2EE Developer & Photography enthusiast Tue, 27 Jul 2010 19:00:00 +0000 en hourly 1 http://wordpress.org/?v=3.0 Add maxlength functionality to textarea http://www.melandri.net/2009/05/28/add-maxlength-funcionality-to-textarea/ http://www.melandri.net/2009/05/28/add-maxlength-funcionality-to-textarea/#comments Thu, 28 May 2009 07:54:48 +0000 amelandri http://localhost/blog/?p=23 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>
]]> http://www.melandri.net/2009/05/28/add-maxlength-funcionality-to-textarea/feed/ 0