Posts Tagged ‘text disappear in input box’

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