Question

I’ve included code for my textbox/textarea counter I put together. (hope it doesn’t get mangled in my post…)

The script works quite well, however I know my code is ridiculously bloated due to my inexperience with jquery and javascript.

I was hoping someone could show me how to take the repetitive code (//event one thru five) and put it into its own function, then call that function on each event.

Thanks,

Jeff

$(document).ready(function() {


if ($('span[class=tbc] input[type=text], span[class=tbc] textarea')) {        
    $('span[class=tbc] input[type=text], span[class=tbc] textarea').each(function() {

       var maxL = $(this).attr('MaxLength');

        $(this).siblings('span[class=tbc]').prepend('<br /><span id="spanID1">Characters remaining: </span>'); 
        $(this).siblings('span[class=tbc]').append('<strong>' + maxL + '</strong>');


            //event one
            $(this).keyup(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end keyup function  


            //event two
            $(this).keydown(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end keydown function  


            //event three
            $(this).mouseout(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end mouseout function 


            //event four
            $(this).mousemove(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end mousemove function 


            //event five
            $(this).blur(function() {
            var cnt = $(this).val().length;
            var chars = maxL-cnt;
            var mesg = $(this).parent('span').attr('ID');

            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

            if (cnt > maxL - 1) {   
            //alert('Cannot enter anymore characters.');
            $(this).siblings('span[class=tbc]').html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
            }
            }); //end blur function 


    });  //end each loop
} //end if ($('span[class=tbc] input[type=text] 

}); //end ready

Answer 1

You can use the bind method in jQuery to bind a list of events instead of binding them one by one:

$(document).ready(function() {

    // No need for if since .each() will do nothing on an empty jQuery    
    $('span[class=tbc] input[type=text], span[class=tbc] textarea').each(function() {

       var maxL = $(this).attr('MaxLength');

       // Try to save queries that you use a lot
       var $tbc = $(this).siblings('span[class=tbc]');

       // You can use append() and prepend() in the same jQuery chain
       $tbc.prepend('<br /><span id="spanID1">Characters remaining: </span>')
           .append('<strong>' + maxL + '</strong>');

            // Bind all events at once
            $(this).bind("keyup keydown mouseout mousemove blur", function() {
                var cnt = $(this).val().length;
                var chars = maxL-cnt;
                var mesg = $(this).parent('span').attr('ID');

                $tbc.html('<br /><span>Characters remaining: </span><strong>' + chars + '</strong>');      

                if (cnt > maxL - 1) {   
                    //alert('Cannot enter anymore characters.');
                    $tbc.html('<br /><span>Characters remaining: </span><span style="color: red;"><strong>' + chars + '</strong> (Cannot enter anymore characters.)</span>'); 
                }
            }); //end bind


    });  //end each loop

}); //end ready

I tweaked your code a little more so you can learn some jQuery tricks.