Delete default value of an input text on click?

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@abc. Com" name="Email" id="Email" onblur="if (this. Value == '') {this.

Value = 'email@abc. Com';}" onfocus="if (this. Value == '[email protected]') {this.

Value = '';}.

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.

Thank you very much. – OpenMind Jun 6 '10 at 13:48 -1 for polluting the DOM. – roosteronacid Jun 6 '10 at 13:54 2 Seconded.

-1 for DOM pollution, there are more semantic solutions (not to mention cleaner, shorter etc. ) – MvanGeest Jun 6 '10 at 13:56 2 I thought the asker just wanted a simple solution, so I just gave him the simplest without much second thought. But, I think the ideal solution (as you have pointed out) would be to use the placeholder-attribute with a Javascript fallback for browsers who don't support it yet. – mqchen Jun 6 '10 at 14:26 1 IMHO there is nothing wrong with using the HTML attributes.

Most importantly its not "polluting the DOM". It is the best and most reliable way to set event listeners that work immediately without having to wait for on-DOM-ready/onload. The only improvement that could be done would be to extract the inline code into functions.

– RoToRa Jun 6 '107 at 7:42.

For future reference, I have to include the HTML5 way to do this. 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 kamikazemusic.com/quick-tips/jquery-html... 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.

This is somewhat cleaner, I think. Note the usage of the "defaultValue" property of the input.

1 I was just staring to write about defaultValue – Anpher Jun 6 '10 at 14:52.

Using jQuery, you can do: $("input:text"). Each(function () { // store default value var v = this. Value; $(this).

Blur(function () { // if input is empty, reset value to default if (this.value. Length == 0) this. Value = v; }).

Focus(function () { // when input is focused, clear its contents this. Value = ""; }); }); And you could stuff all this into a custom plug-in, like so: jQuery.fn. DeObtrusiveText = function () { return this.

Each(function () { var v = this. Value; $(this). Blur(function () { if (this.value.

Length == 0) this. Value = v; }). Focus(function () { this.

Value = ""; }); }); }; Here's how you would use the plug-in: $("input:text"). Advantages to using this code is: Its unobtrusive and doesn't pollute the DOM Code re-use: it works on multiple fields It figures out the default value of inputs by itself Non-jQuery approach: function hideObtrusiveText(id) { var e = document. GetElementById(id); var v = e.

Value; e. Onfocus = function () { e. Value = ""; }; e.

Onblur = function () { if (e.value. Length == 0) e. Value = v; }; }.

3 comments here: 1) if (this. Value == v) this. Value = v; should be if (this.

Value === "") this. Value = v;, 2) You're clearing the value on focus, even if it's a valid, non-default value, and 3) Don't assume they're using jQuery. – Nick Craver?

Jun 6 '10 at 13:47 Aye. I spotted the mistake and corrected it. Thanks thou Nick :) – roosteronacid Jun 6 '10 at 13:53 Your solution still clears the element if I put any input and re-focus the element, this wouldn't be desirable behavior.

– Nick Craver? Jun 6 '10 at 14:02.

If you use jquery you could try the jquery watermark plugin See here for a demo.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.