web-dev-qa-db-fra.com

HTML / CSS Créer une zone de texte avec du texte en gris et qui disparaît lorsque je clique pour entrer des informations, comment?

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

Exemple:

Une zone de texte "Prénom". Les mots "Prénom" sont grisés dans la zone de texte. Lorsque je clique dessus, ces mots disparaissent et j'écris mon nom.

htmlcsstextbox
57
Ibn Ali al-Turki

Cette réponse illustre une approche antérieure à HTML5. Veuillez jeter un oeil sur réponse de Psytronic pour une solution moderne utilisant l'attribut placeholder.

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

Chrome, Firefox, IE10 et Safari prennent en charge l'attribut d'espace réservé html5.

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

Pour obtenir une solution plus multi-navigateurs, vous aurez besoin d’utiliser du javascript. Il existe de nombreuses solutions prédéfinies, bien que je ne les connaisse pas par cœur.

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

114
Psytronic

Avec HTML5, vous pouvez le faire en natif avec: <input name="first_name" placeholder="First Name">

Ceci n'est pas supporté par tous les navigateurs (IE)

Cela peut fonctionner:

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

12
David Houde

Si vous ne ciblez que HTML5, vous pouvez utiliser:

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

Pour les navigateurs non HTML5, je me baserais sur la réponse de Floern en utilisant jQuery et en rendant le javascript non-envahissant. J'utiliserais également une classe pour définir les propriétés floues.

$(document).ready(function () {

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

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

})

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

Le moyen le plus court consiste à ajouter directement le code ci-dessous en tant qu'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 "Rechercher" par "Aller" ou tout autre texte en fonction de vos besoins.

4
Vivek Mhatre

Ceci fonctionne: 

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

Remarque: Vous pouvez modifier le paramètre fictif, l'identifiant et le type en "email" ou tout autre moyen adapté à vos besoins.

Plus de détails par W3Schools à: http://www.w3schools.com/tags/att_input_placeholder.asp

Mais de loin les meilleures solutions sont de Floern et Vivek Mhatre (édité par j0k)

J'ai un extrait de code ci-dessous, qui est une page Web typique.

.Submit {
    background-color: #008CBA;
    border: 3px;
    color: white;
    padding: 8px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
div {
  background-color: yellow;
  }
<div>
  <center>
  <p>Some functions may not work, such as the css ect.
  <p>First Name:<input type="text" id="firstname" placeholder="John" />
  <p>Surname:<input type="text" id="surname" placeholder="Doe" />
  <p>Email:<input type="email" id="email" placeholder="[email protected]" />
  <p>Password:<input type="email" id="email" placeholder="[email protected]" />
  <br /><button class="submit">Submit</button>                 </center>
</div>
4
PiggyPlex

Ceci est une version élaborée, pour vous aider à comprendre

function setVolatileBehavior(elem, onColor, offColor, promptText){
elem.addEventListener("change", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("blur", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("focus", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='';
        elem.style.color = onColor;
    }
    else if (elem.value==''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.value=promptText;
elem.style.color=offColor;
}

Utilisez comme ceci:

setVolatileBehaviour(document.getElementById('yourElementID'),'black','gray','Name');
1
UltraInstinct

Vous pouvez utiliser la solution de Floern. Vous pouvez également vouloir désactiver l'entrée pendant que vous définissez la couleur sur gris. http://www.w3schools.com/tags/att_input_disabled.asp

0
stoneMonkey77