Simple textarea counter

by InferOn

HTML

<div>
    <textarea class="target"></textarea> <span class="counter"></span>

</div>

CSS

.counter {
    display:block;
    height:5px;
    background-color:red;
}

JavaScript

$(function () {
    var oldCount = 0;
    var $area = $('.target');
    var $label = $('.counter');

    $label.css('width', $area.width());

    $area.on('keydown', function () {
        var currentCount = $area.val().length;
        if (currentCount > oldCount && currentCount > 0) {
            $label.width($label.width() - 10);
        } else if (currentCount < oldCount && $label.width() < $area.width()) {
            $label.width($label.width() + 10);
        }
        oldCount = currentCount;
    });
});