Search Textbox like Answers.com

[miumiu]

Hi,

I am trying to create a search textbox , such that when it is onblur, the textbox will show a bg image, while onfocus, it will be just empty blank bg.
When there is text in the textbox, it will have no bg image when it is onblur.

I am able to do it in this way.

<input name="search" type="text" onblur="this.style.backgroundImage='url(images/random.gif)';this.style.backgroundPosition='center center';this.style.backgroundRepeat = 'no-repeat';" onfocus="this.style.background='yellow'"/>

However, the problem come when there is text in the textbox. When it is onblur, the bg image will be back inside the textbox, which cover up the search term in the text box.

One of the working example is from the answers.com
http://www.answers.com/test
When the textbox is empty, the image of "tell me about..." will be in the text box when it is onblur. However, when there is text in the textbox. the image will not be appear.

How do I check if there is text in the textbox, and prevent it from loading the image when there is?

[Twey]

Eh? The "Tell me about" text on answers.com is next to the textbox, not in it.

onblur="if(this.value == '') { this.style.backgroundImage='url(images/random.gif)';this.style.backgroundPosition='center center';this.style.backgroundRepeat = 'no-repeat';}"

[miumiu]

It is inside the text box actaully.

Anyway, the code works great!


thanks a lot!

[Twey]

It's not... honestly
I had to sample the attachment rather small to make the filesize acceptable to the forum, but you can still make out where the text is in relation to the textbox.