Comment créer une étiquette à l'intérieur d'un élément ?

StackOverflow https://stackoverflow.com/questions/781473

  •  13-09-2019
  •  | 
  •  

Question

Je voudrais insérer un texte descriptif dans un élément d'entrée qui disappers lorsque l'utilisateur clique dessus.

Je sais que c'est un truc très courant, mais je ne sais pas comment faire ..

Quelle est la plus simple / meilleure solution?

Était-ce utile?

La solution 

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

Un meilleur exemple serait la recherche SO bouton! Voilà où je suis arrivé ce code de. Voir le source de la page est un outil précieux.

Autres conseils

Si vous utilisez HTML5, vous pouvez utiliser l'attribut placeholder. 

<input type="text" name="user" placeholder="Username">

A mon avis, la meilleure solution consiste ni images, ni en utilisant la valeur par défaut de l'entrée. Au contraire, elle ressemble à la solution de David Dorward.

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

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

J'utilise habituellement la deuxième méthode (labels2) sur mes formes.

L'approche commune est d'utiliser la valeur par défaut comme une étiquette, puis retirez-le lorsque le champ gagne le focus.

Je n'aime vraiment cette approche car elle a des implications en matière d'accessibilité et de facilité d'utilisation.

Au lieu de cela, je commencerais à l'aide d'un élément standard à côté du champ.

Alors, si JavaScript est activé, définissez une classe sur un élément ancêtre qui provoque de nouveaux styles à appliquer que:

  • une position relativement div qui contient l'entrée et l'étiquette
  • Position Absolument l'étiquette
  • Position Absolument l'entrée sur le dessus de l'étiquette
  • Supprimer les bords de l'entrée et de régler son arrière-plan de couleur de transparent

Ensuite, et chaque fois que l'entrée perd le focus, je test pour voir si l'entrée a une valeur. Dans le cas contraire, assurez-vous qu'un élément ancêtre a une classe (par exemple « cache-étiquette »), sinon assurer qu'il ne dispose pas de cette classe.

Chaque fois que l'entrée gagne la mise au point, définissez cette classe.

La feuille de style qui utiliserait classname dans un sélecteur pour cacher l'étiquette (en utilisant text-indent: -9999px, le plus souvent).

Cette approche offre une expérience décente pour tous les utilisateurs, y compris ceux avec JS handicapés 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 une forme sorcière @Tex a été un peu compliqué pour moi et est venu avec une solution qui est, espérons-

épreuve d'erreur avec javascript et CSS désactivé.

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

<head>

<style type="text/css">
<!--
    input {position:relative;background:transparent;} 
-->
</style>

<script>
    function labelPosition() {
        document.getElementById("name").style.position="absolute"; 
            // label is moved behind the textfield using the script, 
            // so it doesnt apply when javascript disabled
    }
</script>

</head>
<body onload="labelPosition()">

<form>
        <label id="name">Your name</label>
        <input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>

</body>

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

<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

Ajouter un événement onblur aussi.

Lorsque vous commencez à taper il disappear.If vide, il apparaît à nouveau. 

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>

... façon plus simple

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

Un indice sur la propriété HTML espace réservé et la balise textarea , s'il vous plaît assurez-vous qu'il n'y a pas d'espace entre <textarea> et </textarea>, sinon le espace réservé ne fonctionne pas, par exemple: 

<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>

Cela ne fonctionnera pas, car il y a un espace entre ...

utiliser

style: 

<style type="text/css">
    .defaultLabel_on { color:#0F0; }
    .defaultLabel_off { color:#CCC; }
</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");

Rappelez-vous simplement d'appeler la fonction defaultLabelClean () avant de présenter sous forme.

bon travail

Vous n'avez pas besoin d'un code Javascript pour ça ...
Je pense que vous voulez dire l'attribut d'espace réservé. Voici le code: 

<input type="text" placeholder="Your descriptive text goes here...">



Le texte par défaut sera gris-ish et quand on clique dessus, il disparaitra!

Je pense que son bon de garder l'étiquette et de ne pas utiliser l'espace réservé comme mentionné ci-dessus. Son bon pour UX comme expliquer ici: https://www.smashingmagazine.com/2018/03 / contact-UX-formes essentielles-conversions /

Voici par exemple avec une étiquette à l'intérieur des champs d'entrée:  codepen.io/jdax/pen/mEBJNa

Voici un exemple simple, tout ce qu'il fait est superposer une image (avec ce libellé que vous voulez). J'ai vu quelque part cette technique. J'utilise la bibliothèque prototype de sorte que vous devrez modifier si vous utilisez autre chose. Avec le chargement d'image après window.load il échoue avec élégance si javascript est désactivé. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
    <meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <style type="text/css" >

        input.searcher
        {
            background-image: url(/images/search_back.png);
            background-repeat: no-repeat;
            background-attachment: scroll;
            background-x-position: left;
            background-y-position: center;
        }

    </style>

    <script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
    <input type="text" id="q" name="q" value="" />

    <script type="text/javascript" language="JavaScript" >
    //  <![CDATA[
        function f(e){
            $('q').removeClassName('searcher');
        }

        function b(e){
            if ( $F('q') == '' )
            {
                $('q').addClassName('searcher');
            }
        }

        Event.observe( 'q', 'focus', f);
        Event.observe( 'q', 'blur', b);
        Event.observe( window, 'load', b);

    //  ]]>
    </script>
</body>
</html>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top