<textarea> LENGTH check

by AndreaLigios

HTML

<label for="one">Unlimited</label><br/>
<textarea id="one"></textarea>
<br/><br/>

<label for="two">Max 10 chars, remaining: <span>10</span>/10</label><br/> 
<textarea id="two" maxlength="10"></textarea>
<br/><br/>

<label for="three">Max 20 chars, remaining: <span>20</span>/20</label><br/>
<textarea id="three" maxlength="20"></textarea>
<br/><br/>

<label for="four">Max 30 chars - no counter</label><br/>
<textarea id="four" maxlength="30"></textarea>

JavaScript

$(document).ready(function() {  
    // target all the textareas in the page with the maxlength attribute specified
    $('textarea[maxlength]').on("keyup", testLength);
    $('textarea[maxlength]').on("paste", testLength);
    $('textarea[maxlength]').on("change", testLength);
});

   function testLength(){
        var limit = parseInt($(this).attr('maxlength'));
        var text = $(this).val();
        var chars = text.length;
        if(chars > limit){
            var new_text = text.substr(0, limit);
            $(this).val(new_text);
        }
       
        // try to notify a SPAN child of the LABEL with the remaining characters value.
        $("label[for='"+$(this).attr('id')+"'] > span").text(parseInt(limit-chars));
    }