0

After a very effective and helpful response to my question here: javascript text field counter display I not have one additional question. The code (shown below) works wonderfully, however it ONLY displays after a keypress. How do I tweak it so that it not only updates on keypress, but also displays after the page has loaded so the user can see the character count before they focus on the field and type? Usually (but not always) there will be text already inside the text field saved from a previous session, so they counter needs to pick up from there.

Code in use currently:

$(window).load(function() {
    $("#input_4_1").keyup(function() {
        var diff = (2550 - $(this).val().length);
        if (diff >= 501) {
            $("#count_4_1").html("<span style=\"color: #55a500;\">Characters remaining: " + diff + "</span>");
        } else if ((diff <= 500) && (diff >= 101)) {
            $("#count_4_1").html("<span style=\"color: #ff6600;\">Characters remaining: " + diff + "</span>");
        } else if (diff <= 100) {
            $("#count_4_1").html("<span style=\"color: #ff0000;\">Characters remaining: " + diff + "</span>");
        }
    });
});

Thanks!

Community
  • 1
  • 1
Cassandra
  • 284
  • 4
  • 18

1 Answers1

1

You just need to break the function out and call it onLoad in addition to each keypress. 

$(window).load(function() {
    var countChars = function(elm) {
        var diff = (2550 - $(elm).val().length);
        if (diff >= 501) {
            $("#count_4_1").html("<span style=\"color: #55a500;\">Characters remaining: " + diff + "</span>");
        } else if ((diff <= 500) && (diff >= 101)) {
            $("#count_4_1").html("<span style=\"color: #ff6600;\">Characters remaining: " + diff + "</span>");
        } else if (diff <= 100) {
            $("#count_4_1").html("<span style=\"color: #ff0000;\">Characters remaining: " + diff + "</span>");
        }
    };

    countChars("#input_4_1");
    $("#input_4_1").keyup(function() { countChars(this) } );        
});

But might I suggest refactoring that code a bit: 

$(window).load(function() {
    var countChars = function(elm, counter) {
        var diff = (2550 - $(elm).val().length), 
            color = 'ff0000';

        if (diff > 500) { 
            color = '55a500';
        } else if (diff > 100) {
            color = 'ff6600';
        }

        $(counter).html('<span style="color: #' + color + ';">Characters remaining: ' + diff + '</span>');
    };

    countChars('#input_4_1','#count_4_1');
    $("#input_4_1").keyup(function() { countChars(this, '#count_4_1') } );
});
Ben Grimm
  • 4,316
  • 2
  • 15
  • 24
  • Hi Ben, I don't really follow. JS noob here! I've tried replacing my code with what you have shown but it doe snot work, and the original working functionality is also broken. Am I misunderstanding something critical or have you got a code error? – Cassandra Feb 10 '15 at 01:27
  • Ben I think your latest update assumes there is only one field this is happening to. There are multiple fields - hence the use of specifying the ID at the start. – Cassandra Feb 10 '15 at 01:32
  • Ben thank you! I think that fits just perfectly, and with much less code for multiple fields. I can easily create another couple of var countChar say like var countChar2550, var countChar1024 etc for different letter amounts and call whatever I need on a case by case basis. Awesome, much appreciated. :) – Cassandra Feb 10 '15 at 01:51
  • Or change the function to take that max count as a parameter. e.g. countChars( input, counter, maxcount ) – Ben Grimm Feb 10 '15 at 01:56
  • Can you show me how to make that happen in a fiddle? – Cassandra Feb 10 '15 at 04:15
  • Sure, http://jsfiddle.net/kpgcmjL4/1/ and you could keep going, factoring out more duplication. – Ben Grimm Feb 10 '15 at 04:59
  • Ben thank you so so much, that is amazingly cool, clear and perfect for what I want to do. You've been a first class help and it's appreciated! – Cassandra Feb 10 '15 at 06:02