Textarea character counter in jQuery

by Francis Rodrigues

HTML

<h1>Textarea character counter in jQuery</h1>
<!-- http://html-ipsum.com/ -->
<form action="#" method="post">
	<div>
		<label for="textarea">Textarea:</label>
		<textarea cols="40" rows="4" name="textarea" id="textarea"></textarea>
    <!-- <div class="character-counter-wrapper"><span class="character-counter counter">0</span> characters typed</div> -->
    <div class="characters-remaining-wrapper"><span class="characters-remaining counter">50</span> characters left</div>
	</div>

	<div>
	    <input type="submit" value="Submit" />
    </div>
</form>

CSS

.counter {
  color:red;
}

JavaScript

$(document).ready(function(){

  //if($('.character-counter').length > 0){
    var maximumCharacters = 50;
    
    $('textarea').keyup(function(){
      var $this = $(this);
      var $parentElement = $this.parent();
      //var $characterCounter = $parentElement.find('.character-counter');
      var $charactersRemaining = $parentElement.find('.characters-remaining');
      
      var typedText = $this.val();
      var textLength = typedText.length;
      var charactersRemaining = maximumCharacters - textLength; 
      
      // chop the text to the desired length
      if(charactersRemaining <= 0){
        $this.val(typedText.substr(0, maximumCharacters));
        charactersRemaining = 0;
        textLength = maximumCharacters;
      }      
      /*if($characterCounter.length){
        $characterCounter.text(textLength);
      }*/
      if($charactersRemaining.length){
        $($charactersRemaining).text(charactersRemaining);
      }
    });
  //}

});