jQuery character counter

Using jQuery count textarea characters and display them.

by Alex Justesen

HTML

<div class="">
  <textarea name="body" class="char-limiter" rows="3" maxlength="280"></textarea>

  <div id="the-count" class="">
    <span id="current"></span> / <span id="maximum"></span>
  </div>
</div>

JavaScript

var charLimiter = function() {
  var element = $('.char-limiter');
  var max_length = $(element).attr('maxlength');

  $('#current').text(0);
  $('#maximum').text(max_length);

  $(element).bind('change keyup input', function() {
    var characterCount = $(this).val().length,
      current = $('#current'),
      maximum = $('#maximum'),
      theCount = $('#the-count');

    current.text(characterCount);
  });
}

$(document).ready(function() {
  charLimiter();
});