Supprimer la valeur par défaut d'un texte d'entrée en cliquant

EDIT : bien que cette solution fonctionne, je vous recommande d'essayer la solution de MvanGeest en dessous de qui utilise l'attribut placeholder - et un repli javascript pour les navigateurs qui ne le supportent pas encore.

si vous cherchez un Mootools équivalent à la réplique de JQuery dans la réponse de MvanGeest, en voici un .

--

vous devriez probablement utilisez les événements onfocus et onblur pour aider les utilisateurs de clavier qui tabulent les formulaires.

voici un exemple:

<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@abc.com') {this.value = '';}" />

C'est un peu plus propre, je pense. Notez l'usage de la propriété "defaultValue" de l'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>

en utilisant jQuery, vous pouvez faire:

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

et vous pourriez tout mettre dans un plug-in personnalisé, comme ça:

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

Voici comment vous utiliseriez le plug-in:

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

avantages à utiliser ce code est:

• Sa discrète et de ne pas polluer les DOM
• réemploi de Code: il fonctionne sur plusieurs champs
• il ressort la valeur par défaut des entrées par lui-même

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

Inscrivez ce qui suit à l'intérieur de la balise , il suffit d'ajouter onFocus= "value= ""pour que votre code final ressemble à ceci:

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

utilise le support d'événement javascript onFocus ().

utilisez simplement une étiquette placeholder dans votre entrée au lieu de value

nous pouvons le faire sans utiliser js de la manière suivante en utilisant l'attribut "placeholder" de html5 (le texte par défaut disparaît lorsque l'utilisateur commence à taper ,mais pas en cliquant simplement )

<input type="email" id="email" placeholder="xyz@abc.com">

voir ceci: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

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

l'attribut placeholder spécifie un petit indice qui décrit la valeur attendue d'un champ d'entrée (par exemple une valeur d'échantillon ou une brève description du format attendu).

le petit indice est affiché dans le champ d'entrée avant que l'utilisateur n'entre une valeur.

Note: l'attribut placeholder fonctionne avec les types d'entrée suivants: texte, Recherche, url, tel, email, et mot de passe.

je pense que ça va aider.

voici du javascript très simple. Ça me va très bien :

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

pourquoi supprimer la valeur? son utile, mais pourquoi ne pas essayer CSS

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

la valeur est importante pour vérifier et valider ur PHP

Voici une solution jQuery. Je laisse toujours réapparaître la valeur par défaut lorsqu'un utilisateur efface le champ d'entrée.

<input name="Email" value="What's your programming question ? be specific." type="text" id="Email" value="email@abc.com" />

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

Je n'ai pas vu de réponses aussi simples que celle-ci, donc peut-être que ça aidera quelqu'un.

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

voici un moyen facile.

#animal représente n'importe quel bouton du DOM.

#animal-value est le code d'entrée visé.

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