Javascript 带有css和jquery的类似Twitter的svg文本计数器-https://jsfiddle.net/moss24/LnoL2xdu/

我正在尝试创建一个类似twitter的文本计数器，它增加一个绿色的宽度直到75%，然后添加一个黄色直到98%，如果输入值大于等于400，则添加一个红色，并添加一个名为highlight的类。同样，当用户按退格键/以任何方式删除文本时，颜色宽度都会减小。 上面已经附加了一个链接

---

非常感谢您的支持。

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>

提交

到目前为止，您做了什么？检查小提琴做得很好，但我希望在每个进度条达到最大长度后附加进度条，而不是拥有整个容器。您可以绘制进度条吗？我不清楚您希望它如何显示。谢谢您的贡献。最后一个路径是，当textLength>=settings.maxText时，应该用浅红色突出显示over text值，以显示该值已超过其max inputbackground color i meanshmm。。。有趣的挑战，我会努力做到这一点：）