Delete default value of an input text on click

Question

I have an input text :

<input name="Email" type="text" id="Email" value="[email protected]" /> 

I want to put a default value like "What's your programming question ? be specific." in StackOverFlow, and when the user click on it the default value disapear.

Answer 1

For future reference, I have to include the HTML5 way to do this.

<input name="Email" type="text" id="Email" value="[email protected]" placeholder="What's your programming question ? be specific." /> 

If you have a HTML5 doctype and a HTML5-compliant browser, this will work. However, many browsers do not currently support this, so at least Internet Explorer users will not be able to see your placeholder. However, see http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ (archive.org version) for a solution. Using that, you'll be very modern and standards-compliant, while also providing the functionality to most users.

Also, the provided link is a well-tested and well-developed solution, which should work out of the box.

Answer 2

EDIT: Although, this solution works, I would recommend you try MvanGeest's solution below which uses the placeholder-attribute and a javascript fallback for browsers which don't support it yet.

If you are looking for a Mootools equivalent to the JQuery fallback in MvanGeest's reply, here is one.

--

You should probably use onfocus and onblur events in order to support keyboard users who tab through forms.

Here's an example:

<input type="text" value="[email protected]" name="Email" id="Email"  onblur="if (this.value == '') {this.value = '[email protected]';}"  onfocus="if (this.value == '[email protected]') {this.value = '';}" />