Character counter and limiter plugin for textfield and textarea form elements in jQuery (by Sk8erPeter)

by Sk8erPeter

HTML

<h1>Character counter and limiter plugin for textfield and textarea form elements in jQuery (by Sk8erPeter)</h1>

<!-- http://html-ipsum.com/ -->
<form action="#" method="post">
    <div>
        <label for="first_textfield">Text Input:</label>
        <input type="text" name="first_textfield" id="first_textfield"
        value="" tabindex="1" />
    </div>
    <div>
        <label for="second_textfield">Text Input:</label>
        <input type="text" name="second_textfield" id="second_textfield"
        value="" tabindex="2" />
    </div>
    <div>
        <label for="third_textfield">Text Input:</label>
        <input type="text" name="third_textfield" id="third_textfield"
        value="" tabindex="3" />
    </div>
    <div>
        <label for="fourth_textfield">Text Input:</label>
        <input type="text" name="fourth_textfield" id="fourth_textfield"
        value="" tabindex="4" />
    </div>
    <div>
        <label for="first_textarea">Textarea:</label>
        <textarea cols="40" rows="4" name="first_textarea" id="first_textarea"
        tabindex="5"></textarea>
    </div>
    <div>
        <label for="second_textarea">Textarea:</label>
        <textarea cols="40" rows="4" name="second_textarea" id="second_textarea"
        tabindex="6"></textarea>
    </div>
    <div>
        <input type="submit" value="Submit" />
    </div>
</form>

CSS

.counter {
    color:blue;
}
.counter.character-counter-limit-exceeded {
    color:red;
}

/*********************************/
form > div {
    border-top: 2px outset black;
}

JavaScript

/**
 * Character counter and limiter plugin for textfield and textarea form elements
 * @author Sk8erPeter
 */ (function ($) {
    $.fn.characterCounter = function (params) {
        // merge default and user parameters
        params = $.extend({
            // define maximum characters
            maximumCharacters: 1000,
            // create typed character counter DOM element on the fly
            characterCounterNeeded: true,
            // create remaining character counter DOM element on the fly
            charactersRemainingNeeded: true,
            // chop text to the maximum characters
            chopText: false,
            // place character counter before input or textarea element
            positionBefore: false,
            // class for limit excess
            limitExceededClass: "character-counter-limit-exceeded",
            // suffix text for typed characters
            charactersTypedSuffix: " characters typed",
            // suffix text for remaining characters
            charactersRemainingSuffixText: " characters left",
            // whether to use the short format (e.g. 123/1000)
            shortFormat: false,
            // separator for the short format
            shortFormatSeparator: "/"
        }, params);

        // traverse all nodes
        this.each(function () {
            var $this = $(this),
                $pluginElementsWrapper,
                $characterCounterSpan,
                $charactersRemainingSpan;

            // return if the given element is not a textfield or textarea
            if (!$this.is("input[type=text]") && !$this.is("textarea")) {
                return this;
            }

            // create main parent div
            if (params.characterCounterNeeded || params.charactersRemainingNeeded) {
                // create the character counter element wrapper
                $pluginElementsWrapper = $('<div>', {
                    'class': 'character-counter-main-wrapper'
               ...