Delete default value of an input text on click

Question

I have an input text :

I want to put a default value like

Answer 1

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

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

Value is important to check & validate ur PHP

Answer 2

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 3

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

Answer 4

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>

Answer 5

<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.

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