web-dev-qa-db-fra.com

Supprimer la valeur par défaut d'un texte saisi au clic

J'ai un texte d'entrée:

<input name="Email" type="text" id="Email" value="[email protected]" />

Je veux mettre une valeur par défaut comme "Quelle est votre question de programmation? Soyez spécifique." dans StackOverFlow, et lorsque l'utilisateur clique dessus, la valeur par défaut disparaît.

javascripthtmlinputdefault-value
58
Wassim AZIRAR

Pour référence future, je dois inclure la méthode HTML5 pour le faire.

<input name="Email" type="text" id="Email" value="[email protected]" placeholder="What's your programming question ? be specific." />

Si vous avez un doctype HTML5 et un navigateur compatible HTML5, cela fonctionnera. Cependant, de nombreux navigateurs ne prennent actuellement pas en charge cette. Par conséquent, les utilisateurs d'Internet Explorer au moins ne pourront pas voir votre espace réservé. Cependant, voir http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ ( - archive.org version ) pour une solution. En utilisant cela, vous serez très moderne et conforme aux normes, tout en fournissant les fonctionnalités à la plupart des utilisateurs.

En outre, le lien fourni est une solution bien testée et bien développée, qui devrait fonctionner immédiatement.

107
MvanGeest

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

Si vous recherchez un équivalent de Mootools au repli de JQuery dans la réponse de MvanGeest, en voici un .

-

Vous devriez probablement utiliser les événements onfocus et onblur afin de prendre en charge les utilisateurs du clavier qui parcourent les formulaires.

Voici un exemple:

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

C'est un peu plus propre, je pense. Notez l'utilisation de la propriété "defaultValue" de l'entrée:

<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>
26
Jani

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 pouvez insérer tout cela dans un plug-in personnalisé, comme ceci:

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

Les avantages d'utiliser ce code sont les suivants:

  • C'est discret et ne pollue pas le DOM
  • Réutilisation de code: cela fonctionne sur plusieurs champs
  • Il détermine la valeur par défaut des entrées par lui-même



Approche non jQuery:

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

Entrez ce qui suit À l'intérieur de la balise , ajoutez simplement onFocus = "value = ''" afin que votre code final ressemble à ceci: 

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

Cela utilise le détenteur de l'événement javascript onFocus ().

3
Myke

Utilisez simplement une balise placeholder dans votre entrée au lieu de value

2
072et

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

L'attribut placeholder spécifie un indice court décrivant la valeur attendue d'un champ de saisie (par exemple, une valeur exemple ou une brève description du format attendu).

L'indicateur court est affiché dans le champ de saisie avant que l'utilisateur n'entre une valeur.

Remarque: l'attribut d'espace réservé fonctionne avec les types de saisie suivants: texte, recherche, url, tel, email et mot de passe.

Je pense que ça aidera.

1
kkk

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)

<input type="email" id="email" placeholder="[email protected]">

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

1
c-h-a-r-a-n

Voici un moyen facile.

#animal représente tous les boutons du DOM.
#animal-value est l'identifiant d'entrée ciblé.

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

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

<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>
0
Kent Munthe Caspersen

Je n'ai pas vu de réponses vraiment simples comme celle-ci, alors peut-être que ça va aider 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";}; }
0
Brian M

Voici javascript très simple. Ça fonctionne bien pour moi :

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

Pourquoi supprimer de 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 votre PHP

0
KingRider