Toggling default value and background color of a textfield on mouse click?

[mbjs]

I m designing a webpage where I have a searchbox.I have set a default value to the textfield and set the background color to gray.Now I want the default value to disappear as well as background color to change to white on focus.How to achieve that?Please help!

[johny10151981]

you got the entire code, if you find some error search on google.

<SCRIPT>
<input name='' value='{text}' style='color:gray;font-style:italic' onfocus='if(this.style.color=="gray") {this.style.color='black';this.style.fontStyle="none";this.value=""}' onblur='if(this.value==""){this.style.color="gray";this.style.fontStyle='italic';this.value="{text}";}'>
</SCRIPT>

[mbjs]

thanks for ur reply.although thats not exactly what i m looking for.i have achieved the changing background color effect by using the following code.but i want my default value to disappear and reappear as well on focus and blur respectively.

<style type="text/css">
body{
    background-color:#ffffff;
}
   #searchwrapper {
   width:174px;
   height:23px;
   background-image:url(image.png);
   background-repeat:no-repeat;
   padding:0px;
   margin:0px;
   position:relative;
}
 
#searchwrapper form { display:inline; }
 
   .normal{
    border:0px;
    background-color:#888888;
    position:absolute;
    top:3px;
    left:3px;
    width:155px;
    height:15px;
    padding-left:6px;
    padding-right:6px;
    font-size:11px;
    color:#24243f;
}

.focus{
    border:0px;
    background-color:#ffffff;
    position:absolute;
    top:3px;
    left:3px;
    width:155px;
    height:15px;
    padding-left:6px;
    padding-right:6px;
    font-size:11px;
    color:#24243f;
}
</style>
<div id="searchwrapper"><form action="">
<input type="text" class="normal" onfocus="this.className='focus'" onblur="this.className='normal'" value="Search"/>
</form>
</div>

[acoder]

@mbjs
johy10151981 has posted the rest of the code that you require.

@johny10151981
No need for those script tags there.

I should also add that you can move the event code out of the tag to make the JavaScript unobtrusive and separate from the HTML markup.

[johny10151981]

@acoder

I wrote that code while i was working in my office, :D i have no idea that i made that mistake