title: Jquery help to enforce maxlength on textarea?
body: <p>Here is Jquery to enforce maxlength for textarea when you add the attribute "maxlength". Maxlength is not supported with IE. How do I adjust my code to handle multiple textarea(s) on the page? Currently
  if I add text to any textarea, they all countdown with the same value.</p>
  
  <p>Jquery:</p>
  
  <pre><code>$(document).ready( function () {
  
  maxLength = $("textarea").attr("maxlength");
      $("textarea").after("&lt;div&gt;&lt;span id='remainingLengthTempId'&gt;" 
                + maxLength + "&lt;/span&gt; remaining&lt;/div&gt;");
  
      $("textarea").bind("keyup change", function(){checkMaxLength(this.id,  maxLength); } )
  
  });
  
  function checkMaxLength(textareaID, maxLength){
  
      currentLengthInTextarea = $("#"+textareaID).val().length;
      $(remainingLengthTempId).text(parseInt(maxLength) - parseInt(currentLengthInTextarea));
  
      if (currentLengthInTextarea &gt; (maxLength)) { 
  
          // Trim the field current length over the maxlength.
          $("textarea").val($("textarea").val().slice(0, maxLength));
          $(remainingLengthTempId).text(0);
  
      }
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>Skills:
  &lt;textarea id="1" maxlength="200" rows="10" cols="60" &gt;&lt;/textarea&gt;
  
  Postions:
  &lt;textarea id="2" maxlength="200" rows="10" cols="60" &gt;&lt;/textarea&gt;
  
  Comments
  &lt;textarea id="3" maxlength="100" rows="10" cols="60" &gt;&lt;/textarea&gt;
  </code></pre>