Text Area Word Limit

Text Area Word Limit

by Nirvanachain

HTML

<textarea type="input" maxlength="52" class="area"></textarea>
<p class="charsRemaining"></p>

CSS

.area {
    resize:none;
    width:30em;
    height:5em;
    border:solid 1px #ddd;
}

JavaScript

jQuery.fn.limitMaxlength = function (options) {
    var settings = jQuery.extend({
        attribute: "maxlength",
        onLimit: function () {},
        onEdit: function () {}
    }, options);

    var onEdit = function () {
        var textarea = jQuery(this),
            maxlength = parseInt(textarea.attr(settings.attribute));
        if (textarea.val().length > maxlength) {
            textarea.val(textarea.val().substr(0, maxlength));
            jQuery.proxy(settings.onLimit, this)();
        }
        jQuery.proxy(settings.onEdit, this)(maxlength - textarea.val().length);
    };
    this.each(onEdit);
    return this.keyup(onEdit).keydown(onEdit).focus(onEdit).live('input paste', onEdit);
};

function onEditCallback(remaining) {
    $(this).siblings('.charsRemaining').text("Remaining: " + remaining);
}

function onLimitCallback() { }

$('textarea[maxlength]').limitMaxlength({
    onEdit: onEditCallback,
    onLimit: onLimitCallback
});