How do you make this kind of search box? [HTML/CSS] - GoFuckYourself.com

eMonk · 02-25-2010, 02:33 PM

How do you make a search box that says "Search..." and when you click on it, it removes the search text so you can enter in your desired text. When you click off of it it displays "Search..." agian. How is this done in html, css, or js, etc?

sexyclicks · 02-25-2010, 02:35 PM

javascript onfocus event search for that

Angry Jew Cat - Banned for Life · 02-25-2010, 02:40 PM

Quote:

Originally Posted by eMonk

How do you make a search box that says "Search..." and when you click on it, it removes the search text so you can enter in your desired text. When you click off of it it displays "Search..." agian. How is this done in html, css, or js, etc?

Curious myself. I got that on my blogs that allow search, and as far as usability goes, it's a pain for the user. One of those small peeves that I find irritating yet haven't fixed yet either, lol.

JD · 02-25-2010, 02:48 PM

add this to the input html
onfocus="this.value=''"
onblur="this.value='Search...'"

eMonk · 02-25-2010, 02:53 PM

Quote:

Originally Posted by JD

add this to the input html
onfocus="this.value=''"
onblur="this.value='Search...'"

That works but it doesn't show "Search..." on load + when you click off with your desired text string it gets replaced with "Search...". Also when no search string is entered and you hit the enter key it will search for "Search".

mattodue · 02-25-2010, 02:53 PM

Code:

<input type="text" name="search" value="Search..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />

eMonk · 02-25-2010, 03:02 PM

Quote:

Originally Posted by mattodue

Code:

<input type="text" name="search" value="Search..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />

That worked.

I'm using a php script and the default value was:

value="{$g_term}"

replacing it with value="Search..." ok? I'm trying to figure out what that $var is for and if I can replace it safely.

mattodue · 02-25-2010, 03:06 PM

Quote:

Originally Posted by eMonk

That worked.

I'm using a php script and the default value was:

value="{$g_term}"

{$g_term} is probably used for the term that a user is searching for. So, someone searching for "keyword" will automatically put that term in the box.

eMonk · 02-25-2010, 03:09 PM

Thanks mattodue.

The search box seems to be working fine without that $g_term variable.

Argos88 · 02-25-2010, 03:55 PM

I wish people were so willing to help when someone asks a business question...

EdgeXXX · 02-25-2010, 03:58 PM

Quote:

Originally Posted by Argos88

I wish people were so willing to help when someone asks a business question...

Some of us are, just depends who's around when the question gets posted I guess.

BestXXXPorn · 02-25-2010, 03:58 PM

Quote:

Originally Posted by Argos88

I wish people were so willing to help when someone asks a business question...

Developers come from a different stock ;)

02-25-2010, 02:33 PM	#1
eMonk Confirmed User Industry Role: Join Date: Aug 2003 Location: Canada Posts: 2,310	How do you make this kind of search box? [HTML/CSS] How do you make a search box that says "Search..." and when you click on it, it removes the search text so you can enter in your desired text. When you click off of it it displays "Search..." agian. How is this done in html, css, or js, etc?

02-25-2010, 02:53 PM	#6
mattodue Registered User Join Date: Nov 2008 Posts: 15	Code: <input type="text" name="search" value="Search..." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;" />

02-25-2010, 02:35 PM	#2
sexyclicks Confirmed User Industry Role: Join Date: Mar 2002 Location: c9media.com Posts: 3,240	javascript onfocus event search for that

02-25-2010, 02:48 PM	#4
JD Too lazy to set a custom title Industry Role: Join Date: Sep 2003 Posts: 22,651	add this to the input html onfocus="this.value=''" onblur="this.value='Search...'"

02-25-2010, 03:09 PM	#9
eMonk Confirmed User Industry Role: Join Date: Aug 2003 Location: Canada Posts: 2,310	Thanks mattodue. The search box seems to be working fine without that $g_term variable.

02-25-2010, 03:55 PM	#10
Argos88 So Fucking Banned Industry Role: Join Date: Sep 2009 Posts: 1,732	I wish people were so willing to help when someone asks a business question...