Question

这个文本计数器和限制器工作得很好，但我希望能够将“剩余字符”的显示更改为textarea之前，而不是之后。开发人员没有回复电子邮件，所以我想知道：如何更改此项以显示在textarea之前剩余的字符，而不是之后？感谢...

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));

如果您在脚本之前绝对需要它，我认为您需要为该函数添加另一个参数，以便您可以控制元素的插入位置。

如何更改此jQuery插件的显示？

1 个答案: