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 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

How to add background image in a textbox using jquery

Share this post:

Related Posts

Leave a Comment