CODEWITHSUNDEEP
phpjavascripthtml
Nisto
Nisto

Reputation: 195

Remove text from fields on input

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.

Upvotes: 0

Views: 549

Answers (5)

Peter Örneholm
Peter Örneholm

Reputation: 2858

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

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

Upvotes: 1

gnome
gnome

Reputation: 1133

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

Upvotes: 1

Quentin
Quentin

Reputation: 943579

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).

Upvotes: 2

PurplePilot
PurplePilot

Reputation: 6612

use the onFocus() in javascript

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

Upvotes: 0

Andris
Andris

Reputation: 27875

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.

Upvotes: 2

Related Questions