javascript - Delete default value of an input text on click - Stack Overflow

admin管理员组

文章数量:1134744

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 Stack Overflow, and when the user click on it the default value disapear.

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 Stack Overflow, and when the user click on it the default value disapear.

• javascript
• html
• input
• default-value

Share Improve this question Follow edited Jun 24, 2022 at 14:40 Stephen Ostermiller♦ 25.5k1616 gold badges9595 silver badges115115 bronze badges asked Jun 6, 2010 at 13:26 FarmerFarmer 11k4040 gold badges123123 silver badges174174 bronze badges

Add a comment  | 

13 Answers 13

Sorted by: Reset to default 112

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 JQuery HTML5 placeholder fix « Kamikazemusic.com 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.

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 = '';}" />

This is somewhat cleaner, i think. Note the usage of the "defaultValue" property of the 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>

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.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's how you would use the plug-in:

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

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

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.

Just use a placeholder tag in your input instead of value

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="[email protected]">

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

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

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).

The 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, tel, email, and password.

I think this will help.

Why remove value? its useful, but why not try CSS

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

Value is important to check & validate ur PHP

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="[email protected]" />

<script>
$("#Email").blur(
    function (){
        if ($(this).val() == "")
            $(this).val($(this).prop("defaultValue"));
        }
).focus(
    function (){
        if ($(this).val() == $(this).prop("defaultValue"))
            $(this).val("");
    }
);
</script>

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

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

Here is very simple javascript. It works fine for me :

// JavaScript:

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";
    }
}
// HTML
<form>
  <label class="screen-reader-text" for="s">Search for</label>
  <input
    type="text"
    class="lightinput"
    onfocus="sFocus(this)" 
    onblur="sBlur(this)"
    value="Enter your search" name="s" id="s"
  />
</form>

本文标签： javascriptDelete default value of an input text on clickStack Overflow