Question

This is probably stupidity on my part, but where am I going wrong with this?

$(function() {

    $('textarea#comment').each(function() {

        var $txt = $(this).val();

        $(this).bind('focus', function() {

            if($(this).val($txt)) {
                $(this).val('');
            }

        });
    });

});

Basically on focus I want to check if the value is the default value in this case ‘Enter your comment’, then if it is change the value to nothing.

Anyone know how to do this? I’m guessing its relatively simple. What the code does at the moment is removes any value.

Answer 1

Ok first off you should only have one tag with the id of comment since ids are supposed to be unique, but if we go with your code you have to setup a default value first like this:

<textarea id="comment">Enter text here</textarea>

Now the javascript:

    (function() {

    $('textarea#comment').each(function() {

        var $txt = $(this).val();
        //alert($txt);
        $(this).bind('focus', function() {

            if($(this).val() === this.defaultValue) {
                $(this).val('');
            }

        });
    });

})();

The self executing function syntax has been corrected here and should be as follow:

(function () { // my code here })();

and for default value use:

this.defaulValue; // works for input boxes as well

Hope it helps. Cheers