Как в Stackoverflow работает счетчик символов, говорящий о том, что осталось символов xyz?

Question

Как в Stackoverflow работает счетчик символов, говорящий о том, что осталось xyz символов?

Answer 1

Возможно что-то вроде (с jQuery):

$('#txtbox').keypress(function() {
    var max = 500;
    var textLen = $(this).val().length;
    var textLeft = max - textLen;
    $('#charCount').text(
        textLeft + ' character' + (textLeft == 1 ? '' : 's') + ' left'
    );
});

(я знаю, что на самом деле лениво не смотреть и не видеть, как они это делают, но вот рабочий пример: http://jsfiddle.net/FishBasketGordo/hqex8/)

Answer 2

HTML:

<textarea id="text" onkeyup="charCount(this);"></textarea>
<span id="chars"></span>

JS:

var maxChars = 500;
function charCount(el) {
   document.getElementById('chars').innerText = maxChars - this.value.length;
}

не проверено, но это основа.

Answer 3

Вот определение метода charCounter () StackExchange. Это немного запутано, но вы можете найти логику, если покопаетесь:

charCounter: function(c) {
    return this.each(function() {
        var d = $(this).parents("form").find("span.text-counter");
        var e = this;
        var f = function() {
            var j = c.min;
            var l = c.max;
            var k = c.setIsValid || function() {};
            var h = e.value ? e.value.length : 0;
            var i = h > l * .8 ? "supernova" : h > l * .6 ? "hot" : h > l * .4 ? "warm" : "cool";
            var g = "";
            if (h == 0) {
                g = "enter at least " + j + " characters";
                k(false);
            } else {
                if (h < j) {
                    g = j - h + " more to go..";
                    k(false);
                } else {
                    g = l - h + " character" + (l - h != 1 ? "s" : "") + " left";
                    k(h <= l);
                }
            }
            d.text(g);
            if (!d.hasClass(i)) {
                d.removeClass("supernova hot warm cool").addClass(i);
            }
        };
        $(this).bind("blur focus keyup", a.DelayedReaction(f, 100, {
            sliding: true
        }).trigger);
    });
}

А текстовые области комментария, например, настроены так (опять же, запутано):

var x = z.find("textarea");
x.charCounter({
    min: 15,
    max: 600,
    setIsValid: A
});

Answer 4

Возможно что-то вроде этого:

var max = 1000;

document.getElementById('freddy').onkeypress =
document.getElementById('freddy').onkeyup = 
document.getElementById('freddy').onkeydown = function(){
    var count = this.value.length;
    if(max < count){
        this.value = this.value.substring(0,999);
        return false;
    }
    setTimeout(function(){
        document.getElementById('susan').innerHTML =
          (max-count)+' characters left!';
    },1);
};

http://jsfiddle.net/Paulpro/S4Dtu/

Answer 5

Посмотрите эту страницу на одном из моих сайтов http://www.bestvaluesolicitors.com/contact-us

Посмотрите на JS - вы ищете эту функцию:

function ml(id,max,repeat){if($F(id).length>max){$(id).value=$F(id).substring(0,max);}$(id).next('div').update($F(id).length+' / '+max+' characters');if(repeat==true){setTimeout('ml("'+id+'",'+max+','+repeat+')',500);}}

По сути это комбинация таймера и подсчета длины текста в textarea

Answer 6

Это можно сделать несколькими способами, но здесь есть ссылка на простой исходный код. Единственный надежный способ узнать, как это происходит, - это посмотреть сжатый javascript.

http://javascript.internet.com/forms/character-counter.html