Make text inside a textfield display when the page loads and disapear when clicked



This script can be used to mimize space of a textfield by putting the title of the field inside the text field itself when the page loads. This title will then disapear when it is clicked.

How To Use

Use the following code as your textfield and fill in the "value" property with the text that you want appear inside the field.

I hope you can use this handy code somewhere

About the Author

I am from Northampton in the UK. I basically make alot of the interfaces, layouts and graphics.

I also run a few of my own websites. One of these is PhotoShopthis which contains photoshop tutorials for beginners to advance users with a focus on web graphics. You can find some of my tutorials on Daniweb.

In my spare time I am a musician and I play for many bands on the euphonium and trombone. I also play the guitar and a bit of piano.

I forgot to mention, I spend alot of time on Daniweb trying to add to this incredible community. Most of my time on this website is spent in the web development forums where I try to answer as many queries as I can that are within my expertise. It has been nice speaking to you and I hope I can speak to you properly on these forums sometime. Have a good day...

<input onfocus="this.value=''" name="Search" type="text" value="Search"/>
~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster

But this code won't work if the text field loses focus and then gains it again and for a variety of other conditions. With a bit of tweaking you guys should get the desired result. Here is my stab at it...:

    <title>Cool Text Effect</title>
    <label>Click on this text box </label>
    <input type="text" name="txt" value="Search" 
        onfocus="if(this.value == 'Search') { this.value = ''} " 
            onblur="if(this.value == '') { this.value='Search'; }" />
MattEvans 473 Veteran Poster Team Colleague Featured Poster

ah... but what if nothing and Search are valid values? ;)

<input type="text" name="txt" value="Search" 
        onfocus="if(this.beenchanged!=true){ this.value = ''}" 
            onblur="if(this.beenchanged!=true) { this.value='Search' }"
               onchange="this.beenchanged = true;"/>
tavox 0 Newbie Poster

Nice job, the original code i already know but the comments posted are very helpful.

almostbob 866 Retired: passive income ROCKS
<title>Text Effect</title>
<input style='background:url("search.jpg")' type="text" name="txt" value="" 
  onblur="if(this.value == '') {"url('search.jpg')"; }" />

where search.jpg is an image of the word 'Search'

ServletEst 0 Newbie Poster

this was really helpful, thanks

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.