Delete default value of an input text on click

Question

I have an input text :

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

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

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

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

This makes use of the javascript onFocus() event holder.

Answer 2

we can do it without using js in the following way using the "placeholder" attribute of html5 ( the default text disappears when the user starts to type in ,but not on just clicking )

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

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

Answer 3

Here is a jQuery solution. I always let the default value reappear when a user clears the input field.

<input name="Email" value="What's 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 4

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

<input name="Email" type="text" id="Email" value="[e-mail]" 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 5

Here is an easy way.

#animal represents any buttons from the DOM.
#animal-value is the input id that being targeted.

$("#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
});

Answer 6

I didn't see any really simple answers like this one, so maybe it 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";}; }