HTML/CSS Faire une zone de texte avec du texte qui est grisé, et qui disparaît quand je clique pour entrer l'info, comment ?

Question

Comment créer une zone de texte dont le contenu est grisé et qui, lorsque je clique dessus pour saisir du texte, la partie grisée disparaît et me permet de saisir le texte souhaité ?

Ejemplo:

Une zone de texte "Prénom". Les mots "Prénom" sont à l'intérieur de la zone de texte en grisé, lorsque je clique, ces mots disparaissent et j'écris mon nom dedans.

Answer 1

Chrome, Firefox, IE10 et Safari prennent en charge l'attribut placeholder html5.

<input type="text" placeholder="First Name:" />

Pour obtenir une solution plus multi-navigateurs, vous devrez utiliser du javascript. Il existe de nombreuses solutions pré-fabriquées, mais je n'en connais aucune de mémoire.

http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 2

Cette réponse illustre une approche pré-HTML5. Veuillez consulter le site La réponse de Psytronic pour une solution moderne utilisant le placeholder attribut.

---

HTML :

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

JavaScript :

function inputFocus(i) {
    if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; }
}
function inputBlur(i) {
    if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; }
}

Answer 3

Avec HTML5, vous pouvez le faire de manière native : <input name="first_name" placeholder="First Name">

Cette fonction n'est cependant pas prise en charge par tous les navigateurs (IE).

Cela peut marcher :

<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='':null">

Sinon, si vous utilisez jQuery, vous pouvez utiliser .focus et .css pour modifier la couleur.

Answer 4

Si vous ne visez que le HTML5, vous pouvez utiliser :

<input type="text" id="firstname" placeholder="First Name:" />

Pour les navigateurs non HTML5, je m'inspirerais de la réponse de Floern en utilisant jQuery et en rendant le javascript non intrusif. J'utiliserais également une classe pour définir les propriétés de flou.

$(document).ready(function () {

    //Set the initial blur (unless its highlighted by default)
    inputBlur($('#Comments'));

    $('#Comments').blur(function () {
        inputBlur(this);
    });
    $('#Comments').focus(function () {
        inputFocus(this);
    });

})

Fonctions :

function inputFocus(i) {
    if (i.value == i.defaultValue) {
        i.value = "";
        $(i).removeClass("blurredDefaultText");
    }
}
function inputBlur(i) {
    if (i.value == "" || i.value == i.defaultValue) {
        i.value = i.defaultValue;
        $(i).addClass("blurredDefaultText");
    }
}

CSS :

.blurredDefaultText {
    color:#888 !important;
}

Answer 5

Le moyen le plus court est d'ajouter directement le code ci-dessous comme attributs supplémentaires dans le type d'entrée que vous souhaitez modifier.

onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'"

Remarque : remplacez le texte "Search" par "go" ou tout autre texte en fonction de vos besoins.