jQuery Code: show character count in text area when user enters the text

Here is the jQuery code to show the character count when the user enters the text in the text area or any input control, it will show the remaining character count as user enters the text in the field.

See the live demo here and view the source if you’d like.

jQuery Code

add the below code in head tag of html page:

     $(function() {
         // "char-count" is the id of text area
         characterCounter('char-count');
    });

     function characterCounter(id, options){
           var o = {
              enforceLength: false
          };
          $.extend(true, o, options || {});
          $element = $('#' + id);
          var maxlength = $element.attr("maxlength");
          var newlabel = null;
          if (maxlength != null && maxlength > 0) {
          
              //Create new label
              newlabel = document.createElement('label');
              newlabel.id = 'limitlbl_' + id;
              newlabel.style.color = 'red';
              newlabel.style.display = 'block';
              newlabel.innerHTML = "Updating...";
              $(newlabel).insertBefore($element);
              
              //Attach limiter to our textarea
              $element.attr('limiterid', newlabel.id);
              $element.keyup(function(){
                  displayCharCounts(this);
              });
              
              //Force the update now!
              displayCharCounts($element);
          }
          
          function displayCharCounts(e){
              $el = $(e);
              $limitLabel = $('#' + $el.attr('limiterid'));
              var maxlength = $el.attr('maxlength');
              
              // Noticed that IE(\r\n) treats new line differentlly to that of ff(\n)
              var value = $el.val().replace('\r\n', '\n');
              var currentLength = value.length;
              var remaining = 0;
              
              if (maxlength == null || maxlength <= 0) {
                  return false;
              }
              remaining = maxlength - currentLength;
              
              if (remaining >= 0) {
                 
                  $limitLabel.css("color", 'green');
                  $limitLabel.html(remaining + ' character');
                  if (remaining != 1) 
                      $limitLabel.html($limitLabel.html() + 's');
                  $limitLabel.html($limitLabel.html() + ' remaining');
              }
              else {
                  if (o.enforceLength) {
                      $el.val(value.substring(0, maxlength));
                      $limitLabel.css("color", "green");
                      $limitLabel.html("0 characters remaining");
                      
                  }
                  else {
                      remaining = Math.abs(remaining);
                      $limitLabel.css("color", "red");
                      $limitLabel.html('Over by ' + remaining + ' character');
                      if (remaining != 1) 
                          $limitLabel.html($limitLabel.html() + 's');
                      $limitLabel.html($limitLabel.html() + '!');
                  }
              }
          }
      }

add the below code in html body tag:

  <textarea maxlength="120" id="char-count"></textarea>