Question

I have a textbox, and everytime the user presses a key, I compute the field’s new length to see how many characters are still available.
Based on that number, I :

1. check if the “send” button should be enabled or not
2. check if the counter that displays the length should be red or black (à la twitter)

But now I have a problem; on each keydown event, I do :

remaining = 100 - count;

if (remaining > 9)
{
    //blue counter; send is activated
    //"if counter.class == red then counter.class = blue..."
    //"send.off('click'); send.on('click', sendmessage)..."
}
else if ((remaining <= 9) && (remaining >= 0))
{
    //red counter; send is activated
}
else //remaining <0
{
    //red counter; send is deactivated
}

Each time the user presses a key, one of the 3 blocs is executed… Isn’t there a way to execute the blocs only when the variable changes “zone” ( ]∞, 9[; [9,0]; ]0; -∞[) ?

Answer 1

No doubt this could be done more elegantly, but the simple answer is just to remember the previous value of the length:

var prevCount = 10;

function checkLength() {
   var count = // your logic to get current count here

   if (count > 9 && prevCount <=9) {
      // count has changed to > 9
   } else if (count <=9 && count >= 0 && (prevCount > 9 || prevCount < 0) {
      // count has changed to <=9
   } else if (count < 0 && prevCount >= 0) {
      // count has changed to < 0
   }

   prevCount = count;
}

Initialise prevCount to whatever value makes sense when the screen loads…

(P.S. How can the count be less than zero?)

Update: Since you’ve confirmed that you’re using jQuery you could do something like this (assumes “black” and “red” are classes in your stylesheet with the appropriate colours and formatting setup):

$(document).ready(function() {
    var limit = 100,
        $rem = $("#remaining").addClass("black"),
        $send = $("input");

    $("textarea").on("keydown keyup", function() {
        var len = $(this).val().length,
            remaining = limit - len;

        $rem.text(remaining);
        $send.prop("disabled", len === 0 || remaining < 0);

        if (remaining <=9 && $rem.hasClass("black")
            || remaining > 9 && $rem.hasClass("red"))
            $rem.toggleClass("black red");
    }).keydown();
});​

Disables the send button if there’s no text or too much text; changes the class from black to red only when necessary. (You could also make black the default and just toggle the “red” class on and off.)

Demo: http://jsfiddle.net/ZAjez/