Comment faire une zone de texte HTML montrent un soupçon lorsqu’elle est vide ?

Question

Je veux la zone de recherche sur ma page web pour afficher le mot « Recherche » en italique gris. Lorsque la boîte reçoit le focus, il doit regarder comme une zone de texte vide. Si du texte est déjà dedans, il doit afficher le texte normalement (noir, non italique). Cela m’aidera à éviter l’encombrement en enlevant l’étiquette.

BTW, c’est une recherche d’Ajax sur la page, donc il n’a pas de bouton.

Answer 1

Une autre option, si vous êtes heureux d'avoir cette fonction uniquement pour les navigateurs plus récents, est de bénéficier de l'appui offert par le HTML 5 de l' espace réservé à l' attribut:

<input name="email" placeholder="Email Address">

Vous pouvez essayer des démos de sortir ici et en HTML5 espace Réservé Style avec CSS.

Notez que cela ne fonctionne pas sur certains navigateurs. Support de Firefox a été ajouté à 3.7. Chrome est très bien. Internet Explorer, ainsi, est Internet Explorer. Pour les navigateurs, vous pouvez utiliser un plugin jQuery appelle jQuery HTML5 espace Réservé, et puis il suffit d'ajouter le code JavaScript suivant pour l'activer.

$('input[placeholder], textarea[placeholder]').placeholder();

Answer 2

Qui est connu comme une zone de texte en filigrane, et il se fait via le JavaScript.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(c'est à dire Compatible).aspx

ou si vous utilisez jQuery, une bien meilleure approche:

• http://digitalbush.com/projects/watermark-input-plugin/
• ou code.google.com/p/jquery-watermark

Answer 3

Vous pouvez définir l' espace réservé à l'aide de l' placeholder attribut HTML (prise en charge du navigateur). L' font-style et color peut être changé avec les CSS (bien que la prise en charge du navigateur est limité). Vous pouvez trouver la démo ici, ou consultez le code ci-dessous:

<input placeholder="Search" type="search" name="search" class="search">

input.search::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input.search:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input.search::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input.search:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

Answer 4

Vous pouvez ajouter et supprimer une classe CSS particulière et modifier la valeur d’entrée / avec JavaScript :

Ensuite, spécifiez une classe de Conseil avec le style que vous voulez dans votre CSS, par exemple :

Answer 5

Le meilleur moyen consiste à relier vos événements JavaScript en utilisant une sorte de bibliothèque JavaScript comme jQuery ou YUI et insérer votre code dans un fichier .js externe.

Mais si vous voulez une solution sale c’est votre inline HTML-solution :

Mise à jour: ajouté le coloriage-trucs demandés.