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

Question

J'ai un texte d'entrée :

<input name="Email" type="text" id="Email" value="email@abc.example" />

Je veux mettre une valeur par défaut comme "Quelle est votre question de programmation ? soyez précis" dans Stack Overflow, et quand l'utilisateur clique dessus la valeur par défaut disparaît.

Answer 1

Pour référence future, je avoir pour inclure la manière HTML5 de le faire.

<input name="Email" type="text" id="Email" value="email@abc.example" 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 pas en charge cette fonction pour l'instant Ainsi, au moins les utilisateurs d'Internet Explorer ne pourront pas voir votre espace réservé. Cependant, voir JQuery HTML5 placeholder fix " Kamikazemusic.com pour trouver une solution. Grâce à cela, vous serez très moderne et conforme aux normes, tout en offrant des fonctionnalités à la plupart des utilisateurs.

De plus, le lien fourni est une solution bien testée et bien développée, qui devrait fonctionner sans problème.

Answer 2

Bien que cette solution fonctionne, je vous recommande d'essayer La solution de MvanGeest ci-dessous qui utilise le placeholder -et une solution de repli JavaScript pour les navigateurs qui ne le prennent pas encore en charge.

Si vous cherchez un équivalent Mootools au fallback jQuery dans la réponse de MvanGeest, en voici une .

--

Vous devriez probablement utiliser onfocus et onblur afin de prendre en charge les utilisateurs de clavier qui naviguent dans les formulaires.

En voici un exemple :

<input type="text" value="email@abc.example" name="Email" id="Email"
 onblur="if (this.value == '') {this.value = 'email@abc.example';}"
 onfocus="if (this.value == 'email@abc.example') {this.value = '';}" />

Answer 3

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>

Answer 4

En utilisant jQuery, vous pouvez le 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 placer tout cela dans un plug-in personnalisé, comme par exemple :

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 utiliser le plug-in :

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

Les avantages de l'utilisation de ce code sont les suivants :

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

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

Answer 5

Saisir les éléments suivants à l'intérieur du il suffit d'ajouter onFocus="value=''" pour que votre code final ressemble à ceci :

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

Cela permet d'utiliser le support d'événement javascript onFocus().