【问题标题】:How to change the display of this jQuery plugin?如何更改此 jQuery 插件的显示?
【发布时间】:2009-05-29 16:03:58
【问题描述】:

这个文本计数器和限制器效果很好,但我希望能够将“剩余字符”的显示更改为文本区域之前,而不是之后。开发人员不回复电子邮件,所以我想知道:如何更改它以显示剩余的字符到 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());
            }
        }

    }
}

【问题讨论】:

    标签: jquery


    【解决方案1】:

    决定计数显示位置的行是:

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

    你可以改成:

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

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

    【讨论】:

    • 谢谢;我有点尴尬,这太容易了。我应该看到我可以改变那个属性,但我还在学习 jQuery....
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-12
    • 1970-01-01
    • 2016-03-16
    • 1970-01-01
    相关资源
    最近更新 更多