Question

I have a JQuery plugin that blanks a textbox when the focus is on it and repaints the textbox with the text set on the value of the parameter.
I would like it to be called for each textbox I specify on my page but it only gets called for the last one I specified.

The Plugin code goes as follows:

(function( $ ){

    $.fn.foco = function(value){

        if ( $(this).length ) {

                var text = {
                    texto:null
                    };
                enfocar = $.extend(text  , value);      

                $(this).val(enfocar.texto);

                $(this).focus(function(){
                    if($(this).val() == enfocar.texto)
                          $(this).val('');                      
                }).blur(function(){
                    if($(this).val() == '')
                        $(this).val(enfocar.texto);                     
                });             


        } else {

                return false;

        }

    }

})( jQuery );

And its called on my page this way:

('#start').foco({texto:'Enter the start text'}); //Works fine

But when I attempt to call it more than once:

('#start').foco({texto:'Enter the start text'}); //Doesn't work
('#end').foco({texto:'Enter the end text'});     //Does work

I wonder if you guys could help me to figure out how can I accomplish that.

Answer 1

Your enfocar is global. Make it local.

var enfocar;

Your plugin should probably use an .each like this:

(function ($) {
    $.fn.foco = function (value) {
        return this.each(function() {
            var text = { texto: null },
                enfocar = $.extend(text, value);

            $(this).val(enfocar.texto)
                   .focus(function () {
                       if ($(this).val() == enfocar.texto) $(this).val('');
                   }).blur(function () {
                       if ($(this).val() == '') $(this).val(enfocar.texto);
                   });
        });
    };
})(jQuery);