Textarea Maxlength: Limit Maximum Number of Characters in Textarea

Unfortunately, the HTML specification allows the maxlength attribute only for text input boxes but not for text fields or text areas. If we also want to limit the maximum number of characters that can be entered by a user in a textarea, we need to use JavaScript.

Today, I want to show you an example for jQuery, which is simultaneously indicating the number of characters left.

HTML

In HTML, its is enough to use the maxlength-attribute as usual:

<div>
   <textarea name="text" maxlength="100"></textarea>
   <p>Remaining characters: <span class="charleft">100</span></p>
</div>

In addition, we want to display the remaining characters below the text box. For this, we are providing a region with the class "charleft, so that we can easily respond to this area later to display the number of characters left.

jQuery

The heart is our jQuery code that makes sure to limit the number of characters and to carry out the display.

$(document).ready(function() {
   $('textarea[maxlength]').keyup(function(){
      var max = parseInt($(this).attr('maxlength'));

      if($(this).val().length > max){
         $(this).val($(this).val().substr(0, max));
      }
	 
      $(this).parent().find('.charleft').html(max - $(this).val().length);
   });	
});

The action should be carried out each time, the user is going of a key (keyup). First, we catch the value of the maximum number of characters allowed from the maxlength-attribute in order to store this value in the variable "max". After that, we look up whether the length of the characters written in the text box exceeds the maximum number of characters allowed. If so, we cut off the extra characters. Finally, we are searching for the "charleft" section in order to set it to the number of remaining  characters (maximum number of characters - the number of characters in the field).