jQuery CharCount - Zach Wills

by ZachWills

HTML

New Status:<br /><textarea id="typeHere" cols="30" rows="3"></textarea>
<div id="output"></div>

CSS

#output{
    width:200px; 
    height:20px;
    background-color:#eee;
    padding:10px;
    margin-top:30px;
    overflow:auto;
}

JavaScript

function CharCount(NumLmit) {
    $("textarea#typeHere").keyup(function() {
        var typed = $("textarea#typeHere").val();
        var NumberLimit = NumLmit;
        var typedLength = NumberLimit - typed.length;
        if (typedLength < 0) {
            $("#output").html("You have <span style='color:red; font-weight:bold;'>" + typedLength + "</span> characters left.");
        } else {
            $("#output").html("You have <span style='color:green;'>" + typedLength + "</span> characters left.");
        }
    });
}

$(document).ready(function(){
   CharCount(100); 
});