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 7…
via Css Website development » Search Results » ajax:
How to add background image in a textbox using jquery
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’);
};
});
});
……………………………
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
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”); ;
}
……………………………
I think the ‘scroll’ bit that you most likely copied from firebug is tripping up jQuery. It works otherwise when I tried your code. The other thing it could be is the path to the image.
For more info: How to add background image in a textbox using jquery
Css Website development » Search Results » ajax