Question

I have a textbox I want to change the watermark on focus.

Please correct me:

$('body').ready(function() {
    $('#edit-submitted-full-name').focus(function() {
        $(this).css({background:'#FFFFFF'});
    });

    $('#edit-submitted-full-name').blur(function() {
        if ($(this).val() == '') {
            $(this).css({background:'url("images/text_fullname.png") no-repeat scroll 7px 5px #FFFFFF'});
        };
    });
});

Answer 1

you can probably do this more cleanly using a css class and avoid having to handle the path to your images. If you added a new css class called “hintable” to everything you wanted to have or not have a hint it would be doubly better.

HTMl

<input type="text" id="edit-submitted-full-name" name="edit-submitted-full-name" class="hintable" value="" />

CSS:

#edit-submitted-full-name.hint 
{
    url(../images/text_fullname.png) no-repeat scroll 7px 5px #FFFFFF; 
}

#some-other-input.hint 
{
    url(../images/text_someother.png) no-repeat scroll 7px 5px #FFFFFF; 
}

and then your code would look like:

$(function(){
    $(".hintable").each(function(){
        ToggleHint($(this)); // add class on page load to elements with "hintable" class
    });        

    $(".hintable").focus(function(){
        $(this).removeClass("hint"); // handle all focus hints
    });

    $(".hintable").blur(function(){
        ToggleHint(this); // handle all blur hints
    });
});

function ToggleHint(obj)
{
    if ($(obj).val() == '') { $(obj).addClass("hint"); };
}