INPUT - Text Character Counter Non-filtering 2 - Roll Your Own

by bizamajig

HTML

<div id="StatusEntry" rows=10 cols=50 contenteditable="true"></div>
<div id="counter"></div>

CSS

#StatusEntry {
    width: 300px;
    height: 200px;
    border: 1px solid blue;
}

JavaScript

var char = 60;
    $("#counter").append("You have <strong>" + char + "</strong> char.");
    $("#StatusEntry").keyup(function () {
        if ($(this).text().length > char) {
            $(this).text($(this).text().substr(1));
        }
        var rest = char - $(this).text().length;
        $("#counter").html("You have <strong>" + rest + "</strong> char.");
        if (rest <= 10) {
            $("#counter").css("color", "#ff7777");
        }
        else {
            $("#counter").css("color", "#111111");
        }
    });