characterCounter.pbo

//Based on: http://stackoverflow.com/questions/5371089/count-characters-in-textarea
saxoJQuery(document).ready(function () {

    //Character limit box container
    var charBox = ''
    charBox += '<div>';
    charBox += '<div style="width:100%;margin-left:120px;text-align:right">';
    charBox += '<strong>Characters Left: </strong>';
    charBox += '<label id="charNum" style="color:green;font-weight:bold">500</label>';
    charBox += '</div>';
    charBox += '</div>';

    var field = saxoJQuery('textarea[name="Summary"]');

    //Set maxlength value for the input field
    field.attr("maxlength", "500");

    //Insert comments into the character limit box container
    field.after(charBox);

    //Attach keyup event handler to the input field
    field.keyup(function () {

        // Set max characters 
        var max = 500;

        // Get length of textarea 
        var len = saxoJQuery(this).val().length;

        // Get character limit field
        var charNum = saxoJQuery('#charNum');

        /*
	If length is greater than max, then display "reached limit" message
	and change text style 
	*/
        if (len >= max) {

            charNum.text('You have reached the limit');
            charNum.css({
                "color": "red",
                "font-weight": "bold"
            });

        } else {

            // While character limit hasn't been reached, display chracters left and style text
            var char = max - len;
            charNum.text(char);
            charNum.css({
                "color": "green",
                "font-weight": "bold"
            });

        }

    });

});