Vous voyez ces zones de saisie de texte de temps en temps sur le Web: une étiquette grise est affichée dans la boîte, mais une fois que vous avez tapé là-bas, le texte gris disparaît. Cette page en a même un: le champ "title" se comporte exactement comme ça.
Alors, questions:
Y a-t-il un terme standard pour cela? Je me débats vraiment pour trouver quoi que ce soit sur Google
peut-il être fait avec seulement CSS?
omettre cela, peut-il être fait avec JavaScript localisé? (c.-à-d. Code juste dans la balise, pas dans l'en-tête HTML).
7 Réponses :
Je ne sais pas un moyen de le faire avec CSS. Mais en regardant la source de page, cela le fait donc donc-sage: la ligne médiane commençant par "Onfocus" est l'endroit où le travail se produit. Lorsque le champ de texte se concentre, il vérifie si la valeur par défaut («recherche») est là. Si tel est le cas, il définit la valeur à '' (chaîne vide). Sinon, le texte n'est pas affecté. Un problème potentiel Voici que si quelqu'un tente de rechercher le mot "recherche", puis clique à l'extérieur de la boîte, puis clique à nouveau, le texte est réinitialisé. Pas un problème énorme, mais quelque chose à garder à l'esprit que vous travaillez.
Je suis surpris tellement le fait en fait de cette façon. Une meilleure méthode serait d'utiliser un drapeau au lieu de comparer directement le texte.
@casablanca Il existe des choses avant-dernière fin davantage sur la source de la source, probablement effectuée pour la rapidité de développement sur la maintenabilité à long terme.
@casablanca - ne se soucie donc pas des normes ou des meilleures pratiques. Les tables sont utilisées partout, même dans des endroits où les listes seraient meilleures. Inline JavaScript aussi, même quand c'est trivial à faire autrement.
Je devinerais qu'ils ont été occupés avec d'autres choses. Ces garçons ne sont pas vraiment assis encore ...
Je suis d'accord. Alors peut avoir un peu de code étrange. Basé sur le code, si vous recherchez "Recherche" et vous cliquez accidentellement sur la zone de texte, la prochaine fois que vous cliquez dessus, il sera vide.
@Yi Jiang - Ce n'est peut-être pas aussi sèche que cela semble. Il est possible qu'ils ont quelque chose sur le côté serveur qui génère des zones de recherche et il est facile de modifier une ligne ou deux de leurs backend Code pour mettre à jour chaque case de recherche à la fois. Qu'est-ce qui sait? À moins que Jeff ou quelqu'un ne sort et nous dit, je spéculerai.
@Aaron - Vous avez peut-être besoin de la boîte de recherche, mais des tables de liste ... Allez, il n'y a sûrement aucune excuse pour l'utiliser! Le code est presque identique, mais avec des listes, vous obtenez une meilleure sémantique et moins de balisage.
Je suppose que c'est qu'ils ne se soucient pas vraiment, le revenu ad-revenus les rend riches. Si cela fonctionne et que ce n'est pas moins sûr, pourquoi investir du temps, de l'argent ou du stress? Aussi, comme indiqué avant que les programmeurs ne soient pas les meilleurs - ils ont eu de plus gros problèmes de hacks d'injection.
mais vous ne pouvez pas avoir d'enfants d'intrants (AFAIK), donc il ne fonctionnera pas < ol>
Si vous voulez cela avec HTML + CSS seulement , vous pouvez essayer d'utiliser le nouvel attribut d'entrée de l'espacet HTML5 Je ne recommanderais pas d'utiliser en ligne JavaScript pour cela - c'est une mauvaise pratique et va à l'encontre du principe de la séparation du contenu et du comportement. Utilisant JQuery, par exemple, quelque chose comme ça fonctionnera: . Malheureusement, cet attribut n'est pas largement pris en charge, essayez donc d'utiliser un script tel que modernizr pour détecter le support du navigateur pour cette fonctionnalité pour cette fonctionnalité. une caractéristique telle que ceci.
C'est plus compliqué que ça. Que se passe-t-il si le formulaire est soumis avant qu'un utilisateur entre une valeur dans l'entrée? Votre indice est soumis ... alors assurez-vous de l'expliquer. De plus, si vous effectuez une validation de formule, besoin d'une logique supplémentaire pour vérifier les champs vides. etc.
Le nom standard est l'entrée de filigrane.
Suivez cette page si vous êtes intéressé par JQuery http://digitalbush.com/projects/watermark-input-plugin/
L'attribut "Code>" Code> est maintenant pris en charge à travers tout majeur Navigateurs. input::-webkit-input-placeholder {
color: #59e;
}
input:-moz-placeholder {
color: #59e;
}
​
Merci pour cela. Fonctionne bien dans les navigateurs à jour. La réponse acceptée est un peu obsolète. Ou utilisez-le directement avec CSS inlinettes pour les cas généraux:
Merci pour l'indice. :)
Il y a un HTML intégré pour de nouveaux navigateurs.
Utilisez simplement l'attribut "espace réservoir":
Vous avez probablement déjà trouvé la réponse que vous recherchez, mais pour d'autres personnes, cela peut aider
<input type ="text"onfocus="inputFocus(this)" onblur="inputBlur(this)" value="Some Text"/>
Pas sûr s'il y a un terme universellement accepté pour cela, mais au moins l'API Windows appelle ces Bannières de Cue .
Ce devrait être la valeur par défaut de la boîte d'entrée. CSS-Seule uniquement [Non], JavaScript [Oui]
@casablanca Le texte duparholder devrait être un meilleur terme
@Yi Jiang: Cela semble raisonnable aussi, bien que je suppose que la volonté de Microsoft en appelant les bannières de Cue était de suggérer que le texte est une mémoire à l'utilisateur qui leur dise quoi entrer.
Ah, à l'aide du terme "bannière" aide à trouver cette question à proximité: Stackoverflow.com/questions/1156966/...