Comment puis-je mettre en œuvre Stack Overflow-comme filigranes dans les formes?

Question

Je me souviens avoir vu un tutoriel quelque part qui parle de comment le style de vos formulaires d'entrée d'une manière plus « utilisable ».

Pour l'essentiel, vous avez une valeur d'espace réservé et quand vous entrez dans l'entrée, il cache l'indice pour ainsi dire.

Maintenant, pour être clair: je ne veux pas l'indication (espace réservé au texte de la valeur) à disparaître sur les priorités, mais plutôt d'aller plus léger quand je commence à taper quelque chose. De bons exemples:

• Consultez les formulaires sur Aardvark . C'est exactement comme je voudrais que mes formulaires d'entrée.

• Notre propre Stack Overflow - lorsque vous essayez de poser une question, à l'intérieur cliquant toute forme d'entrée, il ne cache pas le texte tout de suite. Vous voyez votre curseur ainsi que l'indice. mais quand vous commencez à taper, il cache l'indice. (Je préférerais l'avoir à aller une teinte beaucoup plus léger plutôt que de se cacher tous ensemble cependant, comme dans l'exemple ci-dessus Aardvark.)

Je me souviens avoir lu très clairement un tutoriel quelque part sur le interwebz avec cette exigence exacte, mais sacrément, j'ai oublié de signet.

Toutes les suggestions / liens?

[Mise à jour: J'ai récemment trouvé un plugin jQuery étiquettes sur le terrain qui fait exactement ce que je vouloir. En outre, est ici le lien à un amélioration du même plug-in. ]

Answer 1

Vous pouvez commencer à partir de ceci:

<input type="text" value="Your Hint Here"
       onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';"
       onKeyDown="if (this.value == 'Your Hint Here') {  
                      this.value = ''; this.style.color = '#000'; }"> 

Vous devriez probablement modifier ci-dessus pour utiliser les fonctions JavaScript de telle manière à ne pas répéter votre chaîne de pointe trois fois, mais j'espère que cela peut vous aider à aller dans la bonne direction.

J'ai aussi remarqué que « Join Now » à des formes vark.com également définir la position du curseur au début de la zone de texte au lieu de le laisser à la fin. Cela peut être peu difficile à faire fonctionner cross-browser, mais vous pouvez vérifier la solution proposée dans l'article suivant Josh Stodola :

• Réglage de la position du curseur dans une zone de texte ou TextArea avec Javascript

Answer 2

HTML5 a placeholder attribut , qui est conçu pour cette tâche.

Seulement WebKit (le moteur de rendu utilisé dans Safari et Google Chrome) supporte jusqu'à présent bien. Vous voulez une solution de repli JavaScript comme Daniel lorsque l'espace réservé n'est pas pris en charge.

Il est trivial vérifier support placeholder en JavaScript .

Answer 3

Un champ de saisie ne peut pas avoir à la fois du texte par défaut et le texte entré par l'utilisateur en même temps. La seule façon d'atteindre exactement ce que vous demandez est d'avoir un background-image sur les champs d'entrée avec une image contenant le texte par défaut que vous souhaitez afficher mais je très recommande contre ce que deux couches de texte sera très déroutant pour l'utilisateur. La façon la plus commune pour y parvenir (et ce qui est fait sur votre exemple le site vark.com) est d'utiliser le méthode pour effacer le texte:

$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

Pour y parvenir la manière StackOverflow (et le formulaire d'inscription de Vark.com) ne vous pouvez utiliser la même méthode avec le événement keydown :

$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
  }
});

Pour obtenir à la fois votre changement de couleur mise au point et un texte clair sur keydown serait:

// set text to grey on focus
$('#my_input').focus(function() {
  if($(this).val() == 'default text') {
    $(this).css('color', '#999999');
  }
});

// set text to black and clear default value on key press
$('#my_input').keydown(function() {
  if($(this).val() == 'default text') {
    $(this).val('');
    $(this).css('color', '#000000');
  }
});

Answer 4

En réponse à @ poste de Paul, j'ai remarqué le comportement du HTML5 espace réservé comporte bizarrement sur mon émulateur Android. L'espace réservé ressemble beaucoup jusqu'à ce que vous cliquez dessus et il devient noir avec le curseur vers la droite du mot. D'accord, si vous tapez il disparaîtra, mais ce n'est pas intuitive. J'ai donc écrit une jQuery pour le fixer (où est mon badge HTML5 / jQuery?)

$(document).ready(function() {
    $('input[placeholder]').focus(function() {
        if (!$(this).val()) $(this).val('');
    });
});

Answer 5

J'ai écrit cet exemple que je-faute d'un meilleur nom -disant persistants. placeholders

Il faut un peu plus de balisage, un div enveloppant un label et input, mais qui permet de résoudre beaucoup d'autres problèmes (comme les espaces réservés entrer dans vos données de formulaire ou les champs de mot de passe ne fonctionne pas) et le balisage réel est très propre à lire. Vous vous retrouvez avec quelque chose comme ceci:

<div class="input-wrapper">
    <label for="id_username">Username</label>
    <input id="id_username" type="text" name="username">
</div>

et après y compris le CSS et JS, il fonctionne.