Character Limit

display character limit

HTML

<textarea placeholder="describe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucher"></textarea>
<span class="countdown">140</span>

<textarea placeholder="describe voucher"></textarea>
<span class="countdown">describe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucherdescribe voucher</span>

CSS

textarea{
    border:0;
    width:100px;
    height:4em;
    outline:solid 1px black;
    word-wrap: break-word;
}

textarea:after{
    content:'1';
    display:block;
    width:20px;
    height:20px;
    background-color:black;
}

JavaScript

$('textarea').on({
    'keydown keyup propertychange input paste':function(){
        var countdown = $(this).next('.countdown');
        countdown.text( 140 - this.value.length );
    }
});