Как изменить отображение этого плагина jQuery?

Question

Этот текстовый счетчик и ограничитель отлично работает, но я хотел бы иметь возможность изменить отображение «оставшихся символов» до текстовой области, а не после. Разработчик не отвечает на электронные письма, поэтому мне интересно: как мне изменить это, чтобы отображать символы, оставшиеся до текстовой области, а не после? Спасибо ...

HTML:

<p>Message (less than 1000 characters):</p> (would like the remaining character count to display here)

<script type="text/javascript"> jQuery(function($){ $("textarea.text").dodosTextCounter(1000, {counterDisplayElement: "span",counterDisplayClass: "textCounterDisplay"}); });</script>

<textarea class="text" name="comment" id="comment" rows="10" cols="60"></textarea>
(Character count is now displayed here)

JQuery:

jQuery.fn.dodosTextCounter = function(max, options) {
    // if the counter display doesn't exist, the script will attempt to create it
    options = $.extend({
        counterDisplayElement: "span",                  // tag for the counter display
        counterDisplayClass: "dodosTextCounterDisplay", // class for the counter display
        addLineBreak: true                              // whether to add <br /> after the input element before the counter display
    }, options);

    $(this).each(function(i) {
        updateCounter(this, max, options, i);
        $(this).keyup(function() {
            updateCounter(this, max, options, i);
            return this;
        });
    });
    return this;
};

function updateCounter(input, max, options, index) {
    var currentLength = 0;
    var val = $(input).val();
    if(val) {
        currentLength = val.length;
    }
    if(currentLength > max) {
        $(input).val(val.substring(0, max));
    } else {
        var charLeft = max - currentLength;
        var counterDisplay = options.counterDisplayElement + "." + options.counterDisplayClass + ":eq("+index+")";
        var createNew = $(counterDisplay).length == 0;
        if(createNew) {
            var element = document.createElement(options.counterDisplayElement);
            if(options.counterDisplayElement == 'input') {
                $(element).val(charLeft.toString());
            } else {
                $(element).html(charLeft.toString());
            }
            $(element).addClass(options.counterDisplayClass).insertAfter($(input));
            if(options.addLineBreak) {
                $(input).after("<br />");
            }
        } else {
            if(options.counterDisplayElement == 'input') {
                $(counterDisplay).val(charLeft.toString());
            } else {
                $(counterDisplay).html(charLeft.toString());
            }
        }

    }
}

Answer 1

строка, которая определяет, где отображается счет:

$(element).addClass(options.counterDisplayClass).insertAfter($(input));

Вы можете изменить его на:

$(element).addClass(options.counterDisplayClass).insertBefore($(input));

---

Если вам абсолютно необходимо это до сценария, я думаю, вам нужно добавить еще один параметр в функцию, чтобы вы могли контролировать, куда вставляется элемент.