<form>
  <label for="message_area">No more than 100 characters</label>
  <p>
  <textarea id="message_area" maxlength="100" rows="6" cols="70"></textarea>
  </p>
  <span class="hint" id="textarea_message"></span>
</form>
body
{
  font-family:sans-serif;
}
.hint
{
  font-size:0.8em;
  color:#800;
}

$('textarea#message_area').on('keyup',function() 
{
  var maxlen = $(this).attr('maxlength');
  
  var length = $(this).val().length;
  if(length > (maxlen-10) ){
    $('#textarea_message').text('max length '+maxlen+' characters only!')
  }
  else
    {
      $('#textarea_message').text('');
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js