Comment faire en sorte qu'une zone de texte HTML affiche un indice lorsqu'elle est vide?
Je souhaite que le champ de recherche de ma page Web affiche le mot "Recherche" en italique gris. Lorsque la zone reçoit le focus, elle doit ressembler à une zone de texte vide. S'il contient déjà du texte, celui-ci devrait s'afficher normalement (noir, non en italique). Cela m'aidera à éviter l'encombrement en enlevant l'étiquette.
BTW, ceci est une recherche sur la page Ajax , donc il n'a pas de bouton.
Une autre option, si vous êtes heureux d’avoir cette fonctionnalité uniquement pour les nouveaux navigateurs, consiste à utiliser le support offert par l’attribut fictif de HTML 5:
<input name="email" placeholder="Email Address">
En l'absence de styles, dans Chrome, cela ressemble à:
Vous pouvez essayer des démos sur ici et dans style d'espace réservé HTML5 avec CSS.
Assurez-vous de vérifier le compatibilité de cette fonctionnalité avec le navigateur . Le support dans Firefox a été ajouté dans 3.7. Chrome va bien. Internet Explorer n'a ajouté la prise en charge que dans 10. Si vous ciblez un navigateur qui ne prend pas en charge les espaces réservés d'entrée, vous pouvez utiliser un plugin jQuery appelé jQuery HTML5 Placeholder , puis ajoutez simplement le code JavaScript suivant pour l'activer.
$('input[placeholder], textarea[placeholder]').placeholder();
C'est ce qu'on appelle un filigrane de zone de texte, et cela se fait via JavaScript.
ou si vous utilisez jQuery, une bien meilleure approche:
Vous pouvez définir l'espace réservé à l'aide de l'attribut placeholder en HTML ( prise en charge du navigateur ). font-style et color peuvent être modifiés avec CSS (bien que la prise en charge du navigateur soit limitée).
input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
color:gray;
font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
color:gray;
font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
color:gray;
font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
color:gray;
font-style:italic;
}<input placeholder="Search" type="search" name="q">Vous pouvez ajouter et supprimer une classe CSS spéciale et modifier la valeur d'entrée onfocus/onblur avec JavaScript:
<input type="text" class="hint" value="Search..."
onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">
Spécifiez ensuite une classe indice avec le style souhaité dans votre CSS, par exemple:
input.hint {
color: grey;
}
Le meilleur moyen est de câbler vos événements JavaScript en utilisant une sorte de bibliothèque JavaScript telle que jQuery ou YUI et de placer votre code dans un fichier .js externe.
Mais si vous voulez une solution rapide, voici votre solution HTML intégrée:
<input type="text" id="textbox" value="Search"
onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}"
onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />
Mis à jour : Ajout du coloring-stuff demandé.
J'ai posté ne solution pour cela sur mon site web il y a quelque temps. Pour l'utiliser, importez un seul fichier .js:
<script type="text/javascript" src="/hint-textbox.js"></script>
Puis annotez les entrées pour lesquelles vous souhaitez avoir des astuces avec la classe CSS hintTextbox:
<input type="text" name="email" value="enter email" class="hintTextbox" />
Plus d’informations et d’exemples sont disponibles ici .
Voici un exemple fonctionnel avec le cache de la bibliothèque Google Ajax et un peu de magie jQuery.
Ce serait le CSS:
<style type="text/stylesheet" media="screen">
.inputblank { color:gray; } /* Class to use for blank input */
</style>
Ce serait le code JavaScript:
<script language="javascript"
type="text/javascript"
src="http://www.google.com/jsapi">
</script>
<script>
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
$("#search_form")
.submit(function() {
alert("Submitted. Value= " + $("input:first").val());
return false;
});
$("#keywords")
.focus(function() {
if ($(this).val() == 'Search') {
$(this)
.removeClass('inputblank')
.val('');
}
})
.blur(function() {
if ($(this).val() == '') {
$(this)
.addClass('inputblank')
.val('Search');
}
});
});
</script>
Et ce serait le HTML:
<form id="search_form">
<fieldset>
<legend>Search the site</legend>
<label for="keywords">Keywords:</label>
<input id="keywords" type="text" class="inputblank" value="Search"/>
</fieldset>
</form>
J'espère que cela suffit à vous intéresser à la fois à GAJAXLibs et à jQuery.
Maintenant, cela devient très facile. En html, nous pouvons donner l'attribut d'espace réservé pour les éléments input.
par exemple
<input type="text" name="fst_name" placeholder="First Name"/>
vérifiez pour plus de détails: http://www.w3schools.com/tags/att_input_placeholder.asp
J'ai trouvé que le plugin jQuery jQuery Watermark était meilleur que celui indiqué dans la réponse en haut. Pourquoi mieux? Parce qu'il prend en charge les champs de saisie du mot de passe. De plus, définir la couleur du filigrane (ou d’autres attributs) est aussi simple que de créer une référence .watermark dans votre fichier CSS.
Utilisez Notificateur de formulaire jQuery - il s’agit de l’un des plugins jQuery les plus populaires. Par exemple, vous pouvez librement styliser le filigrane, sans vous demander s'il sera enregistré dans la base de données).
jQuery Watermark utilise un seul style CSS directement sur les éléments de formulaire (j'ai remarqué que les propriétés de taille de police CSS appliquées au filigrane affectaient également les zones de texte - et non ce que je cherchais). Le plus avec jQuery Watermark est que vous pouvez glisser-déposer du texte dans des champs (jQuery Form Notifier ne le permet pas).
Une autre, suggérée par d'autres (celle de digitalbrush.com), soumettra accidentellement la valeur du filigrane à votre formulaire. Je vous le déconseille donc vivement.
Pour les utilisateurs de jQuery: le lien jQuery de naspinski semble rompu, mais essayez celui-ci: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/
Vous obtenez gratuitement un tutoriel du plugin jQuery. :)
Cela s'appelle "filigrane".
J'ai trouvé le plugin jQuery filigrane jQuery qui, contrairement à la première réponse, ne nécessite pas de configuration supplémentaire (la réponse originale nécessite également appel spécial avant que le formulaire ne soit soumis).
Vous pourriez facilement avoir une boîte de lecture "Rechercher" puis lorsque le focus est modifié pour lui faire supprimer le texte. Quelque chose comme ça:
<input onfocus="this.value=''" type="text" value="Search" />
Bien sûr, si vous faites cela, le texte de l'utilisateur disparaîtra quand il cliquera. Donc, vous voulez probablement utiliser quelque chose de plus robuste:
<input name="keyword_" type="text" size="25" style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">
Utilisez une image d’arrière-plan pour rendre le texte:
input.foo { }
input.fooempty { background-image: url("blah.png"); }
Ensuite, tout ce que vous avez à faire est de détecter value == 0 et d'appliquer la bonne classe:
<input class="foo fooempty" value="" type="text" name="bar" />
Et le code JavaScript jQuery ressemble à ceci:
jQuery(function($)
{
var target = $("input.foo");
target.bind("change", function()
{
if( target.val().length > 1 )
{
target.addClass("fooempty");
}
else
{
target.removeClass("fooempty");
}
});
});
Vous voulez assigner quelque chose comme ceci à onfocus:
if (this.value == this.defaultValue)
this.value = ''
this.className = ''
et ceci à onblur:
if (this.value == '')
this.value = this.defaultValue
this.className = 'placeholder'
(Vous pouvez utiliser quelque chose d'un peu plus intelligent, comme une fonction de structure, pour changer le nom de classe si vous le souhaitez.)
Avec certains CSS comme celui-ci:
input.placeholder{
color: gray;
font-style: italic;
}
Lors du premier chargement de la page, faites apparaître Search dans la zone de texte, en gris si vous le souhaitez.
Lorsque la zone de saisie reçoit le focus, sélectionnez tout le texte dans la zone de recherche afin que l'utilisateur puisse commencer à taper, ce qui supprimera le texte sélectionné dans le processus. Cela fonctionnera également bien si l'utilisateur souhaite utiliser la zone de recherche une seconde fois car il n'aura pas à mettre en évidence manuellement le texte précédent pour le supprimer.
<input type="text" value="Search" onfocus="this.select();" />
J'aime la solution de "Knowledge Chikuse" - simple et claire. Il suffit d'ajouter un appel à rendre flou lorsque le chargement de la page est prêt, ce qui définira l'état initial:
$('input[value="text"]').blur();