Making text in inputs disappear when you click on it

this is the prepeller

Rss feed

Making text in inputs disappear when you click on it

Sunday, October 19th, 2008

This is probably really REALLY obvious to other front-end coders, but I didn’t know how to do it. It’s a great way to save room on a design, but still label things clearly. So here it is….

<input onfocus=”this.value=”” type=”text” value=”sometext” />

So you can put an id or class on this as you normally would, but the words ’sometext’ will appear until someone clicks on the input box. If you want them to have to select and delete the text before they enter in their own text….

<input onfocus=”this.select()” type=”text” value=”sometext” />

Update: My good friend Andrew, of Pepsmedia, has informed me that this is a bit naughty, as I’m putting a javascript function on an actual html element. He suggests going to this link and using the jquery method.

http://docs.jquery.com/Events/focus#fn

css input boxes css input text on click text in input text disappear in input box text disappears in input css development olympics

6 comments

Ewan says:

October 23, 2008 at 2:34 pm

I knew about this.select(), but the first one is even better. Have just applied to 4 or 5 search boxes. Thanks!
Dan says:

October 24, 2008 at 8:50 am

Well you’ve successfully wierded me out. This was one of the things on my “get this fixed” list for a client project and low and behold, you blog the solution.

Thanks
kat says:

October 24, 2008 at 10:40 am

Wow! I’m glad you guys found this stuff as useful as me! Will update post with some of the javascript stuff when I figure it out
Luc says:

October 28, 2008 at 10:33 am

I’ve got a jQuery function that makes this particular problem very very easy – all you have to do is add this after your document.ready() and change the #id :
http://www.project14.co.uk/hosted/jquery-dissapear.txt (I wasn’t sure if the comments would mangle the script or not)
Andrew P says:

October 28, 2008 at 11:24 am

Hi Luc, I prefer to not use the defaultValue as it allows for the corner case of the person wanting to type in the same value in a field as the default without affecting the clearing behavior. By attaching a class, and using this to define if the field has been used, it also allows for styling to be applied.
Luc says:

October 28, 2008 at 12:09 pm

@Andrew P – that’s certainly another way round the problem – I try to be descriptive in the fields though, and thus far no-one has a username/email of “Your email address”. I use another function for validation/styling….

Click here to cancel reply.

Ewan says:

October 23, 2008 at 2:34 pm

I knew about this.select(), but the first one is even better. Have just applied to 4 or 5 search boxes. Thanks!

Dan says:

October 24, 2008 at 8:50 am

Well you’ve successfully wierded me out. This was one of the things on my “get this fixed” list for a client project and low and behold, you blog the solution.

Thanks

kat says:

October 24, 2008 at 10:40 am

Wow! I’m glad you guys found this stuff as useful as me! Will update post with some of the javascript stuff when I figure it out

Luc says:

October 28, 2008 at 10:33 am

I’ve got a jQuery function that makes this particular problem very very easy – all you have to do is add this after your document.ready() and change the #id :
http://www.project14.co.uk/hosted/jquery-dissapear.txt (I wasn’t sure if the comments would mangle the script or not)

Andrew P says:

October 28, 2008 at 11:24 am

Hi Luc, I prefer to not use the defaultValue as it allows for the corner case of the person wanting to type in the same value in a field as the default without affecting the clearing behavior. By attaching a class, and using this to define if the field has been used, it also allows for styling to be applied.

October 28, 2008 at 12:09 pm

@Andrew P – that’s certainly another way round the problem – I try to be descriptive in the fields though, and thus far no-one has a username/email of “Your email address”. I use another function for validation/styling….

Safetygoat