Remove text from fields on input

Question

How do I make the text disappear like the way some fields work here on stackoverflow once I start putting in text? I tried out the different 'on'-actions in HTML but that didn't really do what I wanted.

Thanks.

Answer 1

You can do it with onfocus/onblur events. For example:

<input type="text" value="search" onfocus="if(this.value=='search')this.value=''"/>

If you click on this input field, the default text "search" will disappear. The onfocus event handler checks if this input field has the value of "search" and if so then clears it, in other cases (user has already typed something in) leaves everything as is.

Answer 2

use the onFocus() in javascript

<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />

Answer 3

Presumably you mean "Labels which appear inside the input".

If you want to do this in a sane, accessible, semantic way — use a <label>, if JS is available then position it under the element, and onfocus/onblur change classes around based on the value of the element.

I knocked up a simple example at http://dorward.me.uk/tmp/label-work/example.html using jQuery (all the source that isn't part of the jQuery library is embedded in the HTML of that document for easy reading).

Answer 4

jQuery would make this easy work; http://www.jsfiddle.net/TshDN/

Answer 5

If you are using HTML 5 you could use the placeholder attribute.

http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute