-2

based on Which tools and technologies are used to build the Stack Exchange Network?

is it jquery, websockets or something entirely different doing the comment real-time character counter?

  • 2
    The code behind the site isn't simple, but the character counter is obviously client-side, and the dev tools of any modern browser make it easy to see that jQuery is used. – nnnnnn Dec 30 '13 at 15:39
  • 3
    It's all client side, so just look at the source and see for yourself... – Servy Dec 30 '13 at 15:39
  • I did look at the source, and it was somewhat a maze, especially if you account for the possibility of .net minification and bundling making another client side framework very difficult to pick out of the sources. – Maslow Dec 30 '13 at 15:56
  • @Maslow they obfuscate and minimize the JS code, don't think it got anything to do with .NET, just standard procedure. – Shadow The Princess Wizard Dec 30 '13 at 16:11
  • so 3 downvotes without clear comments on why this is a bad question? Is it really just because I could potentially figure this out given enough time and studying their code? – Maslow Jan 2 '14 at 16:22
3

They are using custom made jQuery plugin, written by one of the Stack Exchange developers.

The code is public anyway, so I'll quote it here for convenience:

charCounter: function(a) {
    return this.each(function() {
        var c = a.target ? $(a.target) : $(this).parents("form").find("span.text-counter"),
        f = this;
        $(this).bind("blur focus keyup paste charCounterUpdate", d.DelayedReaction(function() {
            var d = a.min,
            h = a.max,
            l = a.setIsValid || function() {},
            k = f.value ? f.value.replace(/\r\n/g, "\n").length: 0,
            j = k > 0.8 * h ? "supernova": k > 0.6 * h ? "hot": k > 0.4 * h ? "warm": "cool",
            n = "";
            0 == k ? 0 == d ? (n = function(a) {
                return 1 == a.max ? "enter up to " + a.max + " charcter": "enter up to " + a.max + " charcters"
            } ({
                max: h
            }), l(!0)) : (n = function(a) {
                return 1 == a.min ? "enter at least " + a.min + " character": "enter at least " + a.min + " characters"
            } ({
                min: d
            }), l(!1)) : k < d ? (n = d - k + " more to go...", l(!1)) : (d = h - k, n = 0 <= d ? function(a) {
                return 1 == a.count ? a.count + " character left": a.count + " characters left"
            } ({
                count: d
            }) : function(a) {
                return 1 == a.count ? "too long by " + a.count + " character": "too long by " + a.count + " characters"
            } ({
                count: Math.abs(d)
            }), l(k <= h));
            c.text(n);
            c.hasClass(j) || c.removeClass("supernova hot warm cool").addClass(j)
        }, 100, {
            sliding: !0
        }).trigger)
    })
},

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .