Textarea with countdown

by hcharge

HTML

<div class="form-group">
    <textarea rows="5" data-val-length-max="4000"></textarea>
    <div>
        <span class="maxchar-count">4000</span>
    </div>
</div>

CSS

textarea {
    width: 75%;
}

JavaScript

$('textarea').on('keyup', function() {
    characterCount(this);
  });

  $('textarea:not(:empty)').each(function() {
    characterCount(this);
  });

  function characterCount(that) {
    var $this         = $(that),
        $maxLength    = $this.attr('data-val-length-max'),
        $lengthOfText = $this.val().length,
        $charCountEl  = $this.closest('.form-group').find('.maxchar-count');

    if($maxLength) {
      $($charCountEl).text($maxLength - $lengthOfText);
    }

    if($lengthOfText > $maxLength) {
      $charCountEl.addClass('has-error');
    } else {
      $charCountEl.removeClass('has-error');
    }
  }