Comment puis-je faire en sorte qu'une zone de texte HTML affiche un indice lorsqu'elle est vide?

C'est connu comme un filigrane de zone de texte, et cela se fait via JavaScript.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-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

Vous pouvez définir l'espace réservé en utilisant placeholder attribut {[9] } en HTML (support du navigateur ). Les font-style et color peuvent être modifiés avec CSS (bien que le support du navigateur soit limité).

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éeonfocus/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 classehint avec le style que vous voulez 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 comme jQuery ou YUI et de mettre votre code dans un externe .js-fichier.

Mais si vous voulez une solution rapide et sale, c'est votre solution HTML en ligne:

<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'}" />

Mise à jour : ajout du coloring-stuff demandé.

J'ai posté une solution pour cela sur mon site web il y a quelques temps. Pour l'utiliser, importez un seul fichier .js:

<script type="text/javascript" src="/hint-textbox.js"></script>

Puis annotez les entrées que vous voulez avoir des astuces avec la classe CSS hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

Plus d'informations et des exemples sont disponibles ici.

Voici un exemple fonctionnel avec le cache de la bibliothèque Google Ajax et de la 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 c'est suffisant pour vous intéresser à la fois aux GAJAXLibs et à jQuery.

Maintenant, il devient très facile. En html, nous pouvons donner l'attributplaceholder pour les élémentsinput .

Par exemple

<input type="text" name="fst_name" placeholder="First Name"/>

Vérifier pour plus de détails :http://www.w3schools.com/tags/att_input_placeholder.asp

Pour les utilisateurs de jQuery: le lien jQuery de naspinski semble cassé, mais essayez celui-ci: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Vous obtenez un tutoriel de plugin jQuery gratuit en bonus. :)

J'ai trouvé le plugin jQueryfiligrane jQuery pour être meilleur que celui énuméré dans la réponse supérieure. Pourquoi mieux? Parce qu'il prend en charge les champs de saisie de mot de passe. En outre, 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.

C'est ce qu'on appelle "filigrane".

J'ai trouvé le plugin jQueryfiligrane jQuery ce qui, contrairement à la première réponse, ne nécessite pas de configuration supplémentaire (la réponse originale nécessite également un appel spécial avant que le formulaire ne soit soumis).

Utilisez jQuery form Notifier - c'est l'un des plugins jQuery les plus populaires et ne souffre pas des bugs que certaines des autres suggestions jQuery font ici (par exemple, vous pouvez styliser librement le filigrane, sans vous soucier 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-pas ce que je voulais). Le plus avec jQuery Filigrane est que vous pouvez glisser-déposer du texte dans les champs (jQuery Form Notifier ne le permet pas).

Un autre suggéré par d'autres (celui de digitalbrush.com), soumettra accidentellement la valeur du filigrane à votre formulaire, donc je le recommande fortement.

Utilisez une image d'arrière-plan pour afficher le texte:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

Alors 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 pourriez facilement avoir une boîte lire "recherche" puis quand le focus est changé pour elle ont le texte être supprimé. Quelque chose comme ceci:

<input onfocus="this.value=''" type="text" value="Search" />

Bien sûr, si vous faites cela, le texte de l'utilisateur disparaîtra lorsqu'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">

Lorsque la page se charge pour la première fois, la recherche apparaît dans la zone de texte, colorée 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 simplement commencer à taper, ce qui supprimera le texte sélectionné dans le processus. Cela fonctionnera également bien si l'utilisateur veut utiliser la boîte de recherche une deuxième fois car il n'aura pas à mettre en surbrillance manuellement le texte précédent pour le supprimer.

<input type="text" value="Search" onfocus="this.select();" />

J'aime la solution de "connaissance Chikuse" - simple et claire. Il suffit d'ajouter un appel à flou lorsque le chargement de la page est prêt, ce qui définira l'état initial:

$('input[value="text"]').blur();

Vous voulez attribuer 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 framework, pour faire la commutation classname si vous le souhaitez.)

Avec quelques CSS comme ceci:

input.placeholder{
    color: gray;
    font-style: italic;
}

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

Html Simple "obligatoires" de la balise est utile.

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

Utilisateur AJAXToolkit de http://asp.net