Comment implémenter des filigranes de type débordement de stack dans les formulaires?

Je me souviens avoir vu quelque part un tutoriel expliquant comment styliser vos formulaires de saisie de manière plus «utilisable».

En gros, vous avez une valeur de substitution et, lorsque vous saisissez une entrée, elle masque l’allusion pour ainsi dire.

Soyons clairs: je ne veux pas que l’indice (texte de valeur d’espace réservé) disparaisse au focus, mais plutôt plus clair lorsque je commence à taper quelque chose. Bons exemples:

Je me souviens très bien avoir lu un tutoriel quelque part sur l’interwebz avec cette exigence exacte, mais bon, j’ai oublié de le mettre en favori.

Des suggestions / liens?

[Mise à jour: j’ai récemment trouvé un plug – in jQuery intitulé In-Field Labels qui fait exactement ce que je veux. Aussi, voici le lien vers une amélioration du même plugin. ]

Vous voudrez peut-être commencer par ceci:

 

Vous devriez probablement modifier ce qui précède pour utiliser les fonctions JavaScript de manière à ne pas répéter votre indice trois fois, mais j’espère que cela peut vous aider à aller dans la bonne direction.

J’ai également remarqué que les formulaires “Rejoindre maintenant” sur vark.com définissaient également la position du curseur au début de la zone de texte au lieu de la laisser à la fin. Cela peut être un peu délicat de le faire fonctionner avec plusieurs navigateurs, mais vous pouvez vérifier la solution proposée dans l’article suivant de Josh Stodola :

  • Définition de la position du curseur dans une zone de texte ou une zone de texte avec Javascript

HTML5 a l’ atsortingbut de placeholder réservation , conçu pour cette tâche.

Cependant, seul WebKit (le moteur de rendu utilisé dans Safari et Google Chrome) le prend en charge. Vous voudrez une solution de secours JavaScript, comme celle de Daniel, lorsque l’espace réservé n’est pas pris en charge.

Il est facile de vérifier le support des placeholder en JavaScript .

Un champ de saisie ne peut pas contenir simultanément du texte par défaut et du texte saisi par l’utilisateur. La seule façon possible de réaliser exactement ce que vous demandez est d’avoir une image d’arrière-plan sur les champs de saisie avec une image contenant le texte par défaut que vous vouliez afficher, mais je le déconseille vivement, car deux couches de texte seront très déroutantes pour la utilisateur. La manière la plus courante d’atteindre cet objective (et ce qui est fait sur votre site exemple, vark.com) consiste à utiliser la méthode de mise au point pour effacer le texte:

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

Pour y parvenir, comme StackOverflow (et le formulaire d’inscription de Vark.com), vous pouvez utiliser la même méthode avec l’événement keydown :

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

Pour obtenir à la fois le changement de couleur sur le focus et le texte clair sur la réduction de touche, ce 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'); } }); 

En réponse au message de @ Paul, j’ai remarqué que le comportement de l’espace réservé HTML5 agissait étrangement sur mon émulateur Android. L’espace réservé a fière allure jusqu’à ce que vous cliquiez dessus et qu’il devienne noir avec le curseur à droite du mot. Certes, si vous tapez, cela va disparaître, mais ce n’est pas intuitif. J’ai donc écrit un jQuery pour le réparer (où est mon badge HTML5 / jQuery?)

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

J’ai écrit cet exemple que j’ai appelé, à défaut d’un meilleur nom, des espaces réservés persistants.

Cela nécessite un peu plus de balisage, une div encapsulant une label et une input , mais cela résout beaucoup d’autres problèmes (tels que des espaces réservés entrant dans les données de votre formulaire ou des champs de mot de passe ne fonctionnant pas) et le balisage réel est très propre à lire. Vous vous retrouvez avec quelque chose comme ça:

 

et après l’inclusion des CSS et JS, cela fonctionne.