Comment créer une étiquette dans un élément ?

Je voudrais insérer un texte descriptif dans un élément d’entrée qui disparaît lorsque l’utilisateur clique dessus.

Je sais que c’est un truc très commun, mais je ne sais pas comment faire ça ..

Quelle est la solution la plus simple / la meilleure?

 

Un meilleur exemple serait le bouton de recherche SO! C’est là que j’ai reçu ce code. Afficher la source de la page est un outil précieux.

Si vous utilisez HTML5, vous pouvez utiliser l’atsortingbut d’ placeholder .

  

À mon avis, la meilleure solution ne concerne ni les images ni l’utilisation de la valeur par défaut de l’entrée. Cela ressemble plutôt à la solution de David Dorward.

Il est facile à mettre en œuvre et se dégrade facilement pour les lecteurs d’écran et les utilisateurs sans javascript.

Jetez un oeil aux deux exemples ici: http://attardi.org/labels/

J’utilise habituellement la deuxième méthode (étiquettes2) sur mes formulaires.

L’approche courante consiste à utiliser la valeur par défaut en tant qu’étiquette, puis à la supprimer lorsque le champ obtient le focus.

Je n’aime vraiment pas cette approche car elle a des implications sur l’accessibilité et la facilité d’utilisation.

Au lieu de cela, je commencerais par utiliser un élément standard à côté du champ.

Ensuite, si JavaScript est actif, définissez une classe sur un élément ancêtre, ce qui entraîne l’application de certains nouveaux styles:

  • Positionner relativement un div contenant l’entrée et l’étiquette
  • Positionner absolument l’étiquette
  • Positionner absolument l’entrée en haut de l’étiquette
  • Supprimez les bordures de l’entrée et définissez sa couleur d’arrière-plan sur transparente

Ensuite, et chaque fois que l’entrée perd le focus, je teste pour voir si l’entrée a une valeur. Si c’est le cas, assurez-vous qu’un élément ancêtre a une classe (par exemple “hide-label”), sinon assurez-vous qu’il n’a pas cette classe.

Chaque fois que l’entrée acquiert le focus, définissez cette classe.

La feuille de style utilisera ce nom de classe dans un sélecteur pour masquer l’étiquette (en utilisant text-indent: -9999px; généralement).

Cette approche fournit une expérience décente à tous les utilisateurs, y compris ceux dont JS est désactivé et ceux qui utilisent des lecteurs d’écran.

J’ai mis en place des solutions proposées par @Cory Walker avec les extensions de @Rafael et la forme unique @Tex witch qui était un peu compliquée pour moi et qui a abouti à une solution

à l’épreuve des erreurs avec JavaScript et CSS désactivés.

Il manipule avec la couleur d’arrière-plan du champ de formulaire pour afficher / masquer l’étiquette.

      

Voir le script en action: http://mattr.co.uk/work/form_label.html

  

Ajoutez également un événement onblur.

Lorsque vous commencez à taper, il va disparaître.Si vide, il réapparaîtra.

  <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%> 

Manière la plus simple …

S’il vous plaît utiliser PlaceHolder.JS ses travaux dans tous les navigateurs et très facile pour les navigateurs non conformes à html5 http://jamesallardice.github.io/Placeholders.js/

Un indice sur l’ espace réservé à la propriété HTML et la balise textarea , veuillez vous assurer qu’il n’y a pas d’espace entre et , sinon l’ espace réservé ne fonctionne pas, par exemple:

  

Cela ne marchera pas, car il y a un espace entre …

utilisez ceci

style:

  

html:

javascript:

 function defaultLabelClean() { inputs = document.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { if (inputs[i].value == inputs[i].getAttribute("innerLabel")) { inputs[i].value = ''; } } } function defaultLabelAttachEvents(element, label) { element.setAttribute("innerLabel", label); element.onfocus = function(e) { if (this.value==label) { this.className = 'defaultLabel_on'; this.value = ''; } } element.onblur = function(e) { if (this.value=='') { this.className = 'defaultLabel_off'; this.value = element.getAttribute("innerLabel"); } } if (element.value=='') { element.className = 'defaultLabel_off'; element.value = element.getAttribute("innerLabel"); } } defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL"); 

N'oubliez pas d'appeler la fonction defaultLabelClean () avant de soumettre le formulaire.

bon travail

Vous n’avez pas besoin d’un code Javascript pour cela …
Je pense que vous voulez dire l’atsortingbut placeholder. Voici le code:

  

Le texte par défaut sera gris-ish et lorsqu’il sera cliqué, il disparaîtra!

Voici un exemple simple, il suffit de superposer une image (avec la formulation de votre choix). J’ai vu cette technique quelque part. J’utilise la bibliothèque prototype afin de pouvoir modifier si vous utilisez autre chose. Avec le chargement de l’image après window.load, il échoue normalement si JavaScript est désactivé.