Question

In the jQuery below, I tried to add “load” to the bind arrary in order to get the script to fire on load to evaluate the character count of the text area and set the “over” class when applicable. However, it does not work. What should I add to the bind for this event?

<script type="text/javascript">
    maxCharacters = 160;
    jQuery(document).ready(function()
    {
        var characters = jQuery("#excerpt").val().length;
        jQuery(".c5_counter").text(characters);
        jQuery("#excerpt").bind("keyup keydown load", function()
        {
            var count = jQuery(".c5_counter");
            var characters = jQuery(this).val().length;
            if(characters > maxCharacters)
            {
                count.addClass("over");
            }
            else
            {
                count.removeClass("over");
            }
            //count.text(maxCharacters - characters);
            count.text(characters);
        });
    });
</script>';

Answer 1

Why do you wan’t to trigger it on load? Why not just run the function when the document is ready loading? Which is basically what you are aiming for if I understand your question.

You can do so like this:

maxCharacters = 160;
jQuery(document).ready(function()
{
    var checkForOver = function()
    {
        var count = jQuery(".c5_counter");
        var characters = jQuery("#excerpt").val().length;
        if(characters > maxCharacters)
        {
            count.addClass("over");
        }
        else
        {
            count.removeClass("over");
        }
        //count.text(maxCharacters - characters);
        count.text(characters);
    };

    jQuery("#excerpt").bind("keyup keydown", checkForOver);

    // When we are done binding it, trigger the function
    checkForOver();
});