Question

I’m trying to make a jquery plugin (just for fun) and I can’t seem to a certain portion to do what I want.

(function($){

    var resetText = function(){ if (this.value == "") this.value = this.title; }
    var clearText = function(){ if (this.value == this.title) this.value = ""; }

    $.fn.placeHolder = function() {
        return this.each(function(){
            resetText(); // <-- this doesn't work
            $(this).focus(clearText).blur(resetText);
        });
    };
})(jQuery);

Basically, I want the title attribute to be copied over to the value attribute (if the value is empty) on doc.ready AND on field.blur

As it is now, it works onBlur but not on document.ready

I have a feeling it’s a scope thing but honestly I don’t know how to fix it.

See for yourself: http://jsfiddle.net/Usk8h/

Answer 1

You have a this issue, not a scope issue.

Do this instead:

resetText.call( this );

---

The .call() method allows you to set the value of this in the resetText() function to whatever you pass as the first argument.

In this case you’re passing the DOM element represented by this in the .each().

---

EDIT:

You could actually reduce your the plugin down to this:

$.fn.placeHolder = function() {
    return this.focus(clearText).blur(resetText).blur(); // <-- triggers blur
};