JQuery Character Limit+Counter for Textarea

Controls Drag-Drop & Copy-Paste. JQ 1.8.3

by samar pw

HTML

<h1>jQuery Character Limit Counter</h1>

<div id="wrapper"> <span class="info">Min: 35 And Max: 100</span>

    <textarea id="text" cols="50" rows="5" placeholder="Enter Text"></textarea>
    <div id="chars" class="chars">100</div>
</div>

CSS

* {
}
h1 {
    text-align:center;
}
body {
    font:12px Verdana, Arial;
    color:#555;
    background:#222
}
p {
    line-height:1.4;
    margin-bottom:12px
}
#wrapper {
    width:578px;
    margin:7px auto
}
/* TinyLimiter */
 #text {
    width:558px;
    border:0;
    padding:10px;
    line-height:1.4;
    resize:vertical;
    font:12px Verdana, Arial
}
.info {
    margin-bottom:10px;
    color:#fff;
}
.chars {
    margin-top:10px;
    color:#ccc
}
.maxLimit {
    color: #C00;
}
.minLimit {
    color: #F90;
}

JavaScript

(function($) {
    $.fn.extend({
        limiter: function(minLimit, maxLimit, elem) {
            $(this).on("keydown keyup focus keypress", function(e) {
                setCount(this, elem, e);
            });

            function setCount(src, elem, e) {
                var chars = src.value.length;
                if (chars == maxLimit) {
                    //e.preventDefault();
                    elem.html(maxLimit - chars);
                    elem.addClass("maxLimit");
                    return false;
                } else if (chars > maxLimit) {
                    src.value = src.value.substr(0, maxLimit);
                    chars = maxLimit;
                    elem.addClass("maxLimit");
                } else {
                    elem.removeClass("maxLimit");
                }
                if (chars < minLimit) {
                    elem.addClass("minLimit");
                } else {
                    elem.removeClass("minLimit");
                }
                elem.html(maxLimit - chars);
            }
            setCount($(this)[0], elem);
        }
    });
    $(document).ready(function() {
        var elem = $("#chars");
        $("#text").limiter(35, 100, elem);
    });
})(jQuery);