Javascript textbox image

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Javascript textbox image

Post by iknownothing »

Hey Guys,
I have a textbox that has an image in it that is light grey, explaining what the textbox is about, much like "Google" up the top of your browsers (FF and IE7) where the search bar is.

What I'm trying to do is have it default to the image, but if there is text in it, don't display the image. With the following code, the value is pulled from the database, so it is echoing the value. At the moment, the image appears, whether or not there is text in it, but when i click on it the image goes, as long as there is text still in there. I have it running from page load, so I'm not sure why it is doing anything when i just click in it.

Code: Select all

if (add && add.clientnama) {
	var clientnama = add.clientnama;
	var b = function () {
		if (clientnama.value == "") { 
			clientnama.style.background = '#FFFFFF url(images/tb-clientname.gif) left no-repeat'; 
			}
			else {
				clientnama.style.background = '#FFFFFF';
			}
		}
		var f = function() {
			clientnama.style.background = '#FFFFFF';
		}
		clientnama.onblur = b;
		clientnama.onfocus = f;
	}
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

The onfocus event makes the background opaque.

When I did this sort of functionality, I used a div/span that was stuck in the element's background via layering and transparency of the background. I didn't use an image either.
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post by iknownothing »

yeah, the onfocus does make it opaque, and clicking off it then puts the image back, or no image if text is there. It all works fine after its clicked on, but not from load. It's as if its not reading a value until i click on it.
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

I've used the following jquery:

Code: Select all

$(function(){
	$('#searchbox').val('Search').focus(function(){
		if($(this).val()=='Search') $(this).val('').css('color','#303030');
	}).blur(function(){
		if($(this).val()=='') $(this).val('Search').css('color','#a0a0a0');
	});
});
Post Reply