Twitter喜欢带有css和jquery的svg文本计数器 https://jsfiddle.net/moss24/L

Question

我正在尝试创建一个类似 Twitter 的文本计数器，它将绿色宽度递增到 75%，然后附加黄色直到 98%，如果输入值为>= 400，则附加红色添加一个名为突出显示的类。同样，当用户按退格键/以任何方式删除文本以减小颜色宽度时。上面附上了一个链接。

非常感谢您的支持。

Answer 1

太多的javascript，只需使用一小段代码就可以简单得多：

(function($) {
    $.fn.textCounter = function(options) {
        var settings = $.extend({
            maxText: 400,
            textWarning: 75
        }, options);
        return this.each(function() {
            $(this).on('keyup', function() {
                var textLength = $(this).val().length;
                var progressbar = $('#commentTxtCounter > span');
                var progressbarLength = (textLength*100)/settings.maxText;
                if (progressbarLength > 100) {
                    progressbarLength = 100;
                }
                progressbar.css('width', progressbarLength + '%');
                if (textLength == 0 || textLength >= settings.maxText) {
                    $('#submit').prop('disabled', true);
                } else {
                    $('#submit').prop('disabled', false);
                }
                if (textLength >= settings.maxText) {
                    progressbar.attr('class', 'text-over');
                } else if (textLength >= settings.textWarning) {
                    progressbar.attr('class', 'text-warn');
                } else {
                    progressbar.attr('class', 'text-safe');
                }
            });
        });
    }
}(jQuery));
$('.text-control').textCounter();

用少一点的 html：

<textarea class="text-control " rows="1" data-min-rows="1" placeholder="comment..."></textarea>
<button type="submit" id="submit" disabled>Submit</button>
<div class="counter-cont">
    <div class="counter-sub" id="commentTxtCounter">
        <span class="text-safe"></span>
    </div>
</div>