javascript insérer - Comment est-ce que je fais une boîte de texte HTML montrer un conseil quand vide?




balise dans (17)

Je souhaite que le champ de recherche sur ma page Web affiche le mot "Recherche" en italique grisé. Lorsque la boîte reçoit le focus, elle doit ressembler à une zone de texte vide. S'il y a déjà du texte, il devrait afficher le texte normalement (noir, non-italique). Cela m'aidera à éviter l'encombrement en enlevant l'étiquette.

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


Answers

Utilisateur AJAXToolkit à partir de http://asp.net


Vous pouvez définir l' espace réservé à l'aide de l' attribut placeholder en HTML ( prise en charge du navigateur ). Le font-style et la 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 facilement faire lire une case "Rechercher" puis, lorsque le focus est modifié, le texte doit être 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">

Maintenant, il devient très facile. En html, nous pouvons donner l'attribut d' espace réservé pour les éléments d' entrée .

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


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...'; }">

Puis spécifiez une classe d' indice avec le style que vous voulez dans votre CSS par exemple:

input.hint {
    color: grey;
}


J'ai trouvé le jQuery plugin code.google.com/p/jquery-watermark meilleur que celui listé dans la réponse du haut. Pourquoi mieux? Parce qu'il prend en charge les champs de saisie de mot de passe. En outre, la définition de la couleur du filigrane (ou d'autres attributs) est aussi simple que la création d'une référence .watermark dans votre fichier CSS.


Vous voulez assigner quelque chose comme ça à 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 cadre, pour faire le changement de nom de classe si vous le souhaitez.)

Avec certains CSS comme celui-ci:

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

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

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

Alors tout ce que vous avez à faire est de détecter la value == 0 et d'appliquer la bonne classe:

 <input class="foo fooempty" value="" type="text" name="bar" />

Et le code jQuery JavaScript ressemble à ceci:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Lorsque la page commence à charger, faites apparaître Recherche 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 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 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();" />

Ceci est appelé "filigrane".

J'ai trouvé le jQuery plugin jQuery filigrane qui, contrairement à la première réponse, ne nécessite pas d'installation supplémentaire (la réponse d'origine nécessite également un appel spécial avant que le formulaire est soumis).


Une autre option, si vous êtes heureux d'avoir cette fonctionnalité uniquement pour les nouveaux navigateurs, est d'utiliser le support offert par l'attribut placeholder de HTML 5:

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

En l'absence de tout style, dans Chrome cela ressemble à:

Vous pouvez essayer des démonstrations here et dans HTML5 Placeholder Styling avec CSS .

Assurez-vous de vérifier la compatibilité de cette fonctionnalité avec le navigateur . Le support de Firefox a été ajouté en 3.7. Chrome est bon. Internet Explorer n'a ajouté le support que dans 10. Si vous ciblez un navigateur qui ne prend pas en charge les espaces réservés de saisie, vous pouvez utiliser un plugin jQuery appelé jQuery HTML5 Placeholder , puis ajouter le code JavaScript suivant pour l'activer.

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

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

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

Puis annoter les entrées que vous voulez avoir avec la classe CSS hintTextbox :

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

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


Utilisez jQuery Form Notifier - c'est l'un des plugins jQuery les plus populaires et ne souffre pas des bugs des autres suggestions de jQuery (par exemple, vous pouvez personnaliser le filigrane, sans vous soucier de savoir s'il sera enregistré dans le 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 Watermark est que vous pouvez glisser-déposer du texte dans des 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 vous recommande fortement de ne pas le faire.



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

Il y a deux meilleures solutions

  1. display: inline-block;

    OU

  2. display: table;

Sur ces deux display:table; est mieux.

Pour l' display:inline-block; vous pouvez utiliser la méthode de la marge négative pour réparer l'espace supplémentaire







javascript html html5