<textarea id="text-counter" placeholder="Напишите сюда что-нибудь"></textarea><br>
<div id="counter"></div>
#text-counter {
    width: 50%; 
    position: relative; 
    font: 12pt Verdana, Tahoma sans-serif; 
    line-height: 1.4;
    color: #000;
    border: 1px solid #eee;
}
$(function() {
    $(document).ready(function() {
        $('#text-counter').on('blur, keyup', function() {
            var $max = 10;
           

            var $val = $(this).val();

            $(this).attr('maxlength', $max);

            if( $val.length <= 0 ) {
                $('#counter').html(0);
            } else {
                if( $max < parseInt( $val.length ) ) {
                    $this.val( $val.substring(0, $max) ); 
                }

                $('#counter').html( $(this).val().length );
            }
        });
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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