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

Question

Je souhaite que le champ de recherche de ma page Web affiche le mot " Search " 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, il s'agit d'une recherche sur la page Ajax . Elle a donc pas de bouton.

Answer 1

Si vous préférez que cette fonctionnalité ne soit disponible que pour les nouveaux navigateurs, vous pouvez également utiliser le support offert par l'attribut espace réservé de HTML 5:

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

En l'absence de styles, sous Chrome, cela ressemble à:

Vous pouvez essayer des démonstrations sur ici et dans Style d'espace réservé HTML5 avec CSS .

Assurez-vous de vérifier la compatibilité de cette fonctionnalité de navigateur . Le support dans Firefox a été ajouté dans 3.7. Chrome est bien. Internet & Nbsp; Explorer n'a ajouté que la prise en charge 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é Espace réservé jQuery HTML5 , puis ajoutez simplement le code JavaScript suivant pour l'activer.

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

Answer 2

C'est ce qu'on appelle un filigrane de zone de texte, et cela se fait via JavaScript.

• http://naspinski.net/ post / Texte-Entrée-Filigranes-utilisant-Javascript- (Compatible avec IE) .aspx

ou si vous utilisez jQuery, une approche bien meilleure:

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

Answer 3

Vous pouvez définir le espace réservé à l'aide de placeholder attribut au format 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">

Answer 4

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

Answer 5

Le meilleur moyen consiste à câbler vos événements JavaScript en utilisant une sorte de bibliothèque JavaScript telle que jQuery ou YUI et placez 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 colorant demandé.

Answer 6

J'ai posté une solution sur ce site il y a quelque temps. Pour l'utiliser, importez un seul .js fichier:

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

Annotez ensuite les entrées souhaitées avec la classe CSS hintTextbox:

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

Plus d'informations et d'exemples sont disponibles ici .

Answer 7

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

Answer 8

Maintenant, cela devient très facile. En html, nous pouvons attribuer l’attribut espace réservé pour les éléments input .

p. ex.

<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

Answer 9

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

Answer 10

J'ai trouvé le plug-in jQuery jQuery Watermark . être meilleur que celui indiqué dans la réponse du 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 .watermark référence dans votre fichier CSS.

Answer 11

Ceci est appelé & "Filigrane &";

.

J'ai trouvé le plug-in jQuery filigrane jQuery qui , contrairement à la première réponse, ne nécessite aucune configuration supplémentaire (la réponse initiale nécessite également un appel spécial avant que le formulaire ne soit envoyé).

Answer 12

Utilisez la notificateur de formulaire jQuery . Il s'agit de l'un des plugins jQuery les plus populaires. et ne souffre pas des bogues que certaines des autres suggestions de jQuery font ici (par exemple, vous pouvez librement nommer le filigrane, sans vous soucier de son enregistrement 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).

Un autre modèle suggéré par d'autres (celui de digitalbrush.com) soumettra accidentellement la valeur du filigrane à votre formulaire. Je vous le déconseille donc vivement.

Answer 13

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

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

Il ne vous reste plus qu'à détecter value == 0 et 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");
        }
    });
});

Answer 14

Vous pourriez facilement lire une boîte & "Rechercher &"; ensuite, lorsque le focus est modifié, le texte est supprimé. 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">

Answer 15

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 le champ de recherche une seconde fois car il n’a pas à mettre en évidence manuellement le texte précédent pour le supprimer.

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

Answer 16

J'aime la solution de " Knowledge Chikuse " - simple et clair. 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();

Answer 17

Vous souhaitez attribuer quelque chose comme ceci à onfocus:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

et ceci sur 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;
}

Answer 18

$('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">

Answer 19

La balise 'required' en HTML simple est utile.

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

Answer 20

L'utilisateur AJAXToolkit de http://asp.net