How does Stackoverflow execute a character counter talking about xyz characters?

Question

How does Stackoverflow execute a character counter talking about xyz characters?

Answer 1

Maybe something like (with jQuery):

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

(I know that it is lazy not to look at all and not to see how they do it, but here is a working example: 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; } 

not verified, but that the basics.

Answer 3

There are several ways to do this, but here is a link to simple, simple source code. The only sure way to find out how SO is to look at compressed javascript.

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

Answer 4

Check out this page on one of my sites http://www.bestvaluesolicitors.com/contact-us

Peek on JS - you are looking for this feature:

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

If possible, this is a combination of a timer and counting the length of text in textarea

Answer 5

Maybe something like this:

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 6

Here is the definition of the StackExchange charCounter () method. This is a bit confusing, but you can find the logic if you dig it:

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

And comment text areas, for example, are set up like this (again, obfuscation):

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