[Javascript] Comment est-ce que je fais une boîte de texte HTML montrer un conseil quand vide?


Answers

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

ou si vous utilisez jQuery, une approche bien meilleure:

Question

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.




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 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">



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.







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



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



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.




J'aime la solution de "Knowledge Chikuse" - simple et claire. Seulement besoin d'ajouter un appel à flou lorsque le chargement de la page est prêt qui va définir l'état initial:

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