Page 1 of 1

Javascript textbox image

Posted: Tue Mar 20, 2007 6:41 pm
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;
	}

Posted: Tue Mar 20, 2007 6:56 pm
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.

Posted: Tue Mar 20, 2007 9:33 pm
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.

Posted: Tue Mar 20, 2007 9:41 pm
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');
	});
});