Delete default value for text input when pressed

Question

I have input text:

<input name="Email" type="text" id="Email" value="[e-mail]" /> 

I want to set a default value, for example, "What is your programming question?" in StackOverFlow, and when the user clicks on it, the default value disappears.

Answer 1

EDIT . Although this solution works, I would recommend you try the MvanGeest solution below , which uses the placeholder attribute and javascript fallback for browsers that do not yet support it.

If you are looking for Mootools equivalent to the JQuery answer in the MvanGeest answer, here is one .

-

You should probably use the onfocus and onblur to support keyboard users who view forms.

Here is an example:

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

Answer 2

For future reference, I have to include an HTML5 way for this.

 <input name="Email" type="text" id="Email" value="[e-mail]" placeholder="What your programming question ? be specific." /> 

If you have an HTML5 document and an HTML5 compatible 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 this, you will be very modern and standards compliant, as well as provide functionality for most users.

In addition, the link provided is a well-tested and well-designed solution that should work out of the box.

Answer 3

It's a little cleaner, I think. Note the use of the "defaultValue" property for input:

 <script> function onBlur(el) { if (el.value == '') { el.value = el.defaultValue; } } function onFocus(el) { if (el.value == el.defaultValue) { el.value = ''; } } </script> <form> <input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" /> </form> 

Answer 4

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 can use all this in a custom plugin, for example:

 jQuery.fn.hideObtrusiveText = 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 you can use the plugin:

 $("input:text").hideObtrusiveText(); 

Benefits of using this code:

• Its unobtrusive and non-polluting DOM
• Code reuse: it works with multiple fields
• He calculates the default values ​​himself

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; }; } 

Answer 5

Enter the following inside the tag just add onFocus = "value = ''" so your final code looks like this:

 <input type="email" id="Email" onFocus="value=''"> 

In this case, the owner of the javascript onFocus () event is used.

Answer 6

Just use the placeholder tag on your input instead of value

Answer 7

we can do this without using js as follows, using the "placeholder" attribute for html5 (the default text disappears when the user starts typing, but not just by clicking)

<input type="email" id="email" placeholder="[e-mail]">

see this: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

Answer 8

<input name="Email" type="text" id="Email" placeholder="enter your question" />

The placeholder attribute indicates a short hint that describes the expected value of the input field (for example, an example value or a brief description of the expected format).

A short hint is displayed in the input field before the user enters a value.

Note. The placeholder attribute works with the following input types: text, search, URL, body, email, and password.

I think this will help.

Answer 9

Here is a very simple javascript. This works fine for me:

 function sFocus (field) { if(field.value == 'Enter your search') { field.value = ''; } field.className = "darkinput"; } function sBlur (field) { if (field.value == '') { field.value = 'Enter your search'; field.className = "lightinput"; } else { field.className = "darkinput"; } } 

Answer 10

Why delete a value? its useful, but why not try CSS

 input[submit] { font-size: 0 !important; } 

Value is important to check and check ur ph

Answer 11

Here is a jQuery solution. I always return the default when the user clears the input field.

 <input name="Email" value="What your programming question ? be specific." type="text" id="Email" value="[e-mail]" /> <script> $("#Email").blur( function (){ if ($(this).val() == "") $(this).val($(this).prop("defaultValue")); } ).focus( function (){ if ($(this).val() == $(this).prop("defaultValue")) $(this).val(""); } ); </script> 

Answer 12

I have not seen such simple answers as this one, so maybe this will help someone out.

 var inputText = document.getElementById("inputText"); inputText.onfocus = function(){ if (inputText.value != ""){ inputText.value = "";}; } inputText.onblur = function(){ if (inputText.value != "default value"){ inputText.value = "default value";}; } 

Answer 13

Here is an easy way.

#animal represents any buttons from the DOM.
#animal-value is the input identifier that is the target.

 $("#animal").on('click', function(){ var userVal = $("#animal-value").val(); // storing that value console.log(userVal); // logging the stored value to the console $("#animal-value").val('') // reseting it to empty });