Come creare un'etichetta all'interno di un <input> elemento?

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

  •  13-09-2019
  •  | 
  •  

Domanda

Vorrei inserire un testo descrittivo all'interno di un elemento di input che disappers quando l'utente clicca su di essa.

So che è un trucco molto usato, ma non so come fare..

Che cosa è più semplice/migliore soluzione?

È stato utile?

Soluzione 

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

Un esempio migliore sarebbe il pulsante in modo ricerca! Ecco dove ho ottenuto questo codice. Visualizza sorgente pagina è uno strumento prezioso.

Altri suggerimenti

Se stai usando HTML5, è possibile utilizzare l'attributo placeholder. 

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

A mio avviso, la soluzione migliore non implica né immagini, né utilizzando il valore predefinito della ingresso. Piuttosto, sembra qualcosa di simile soluzione di David Dorward.

E 'facile da implementare e degrada bene per lettori di schermo e gli utenti con javascript.

Date un'occhiata a due esempi qui: http://attardi.org/labels/

Io di solito uso il secondo metodo (labels2) sulle mie forme.

L'approccio comune è quello di utilizzare il valore predefinito come un'etichetta, e poi rimuoverlo quando il campo si guadagna la messa a fuoco.

Non mi piace questo approccio, è l'accessibilità e l'usabilità implicazioni.

Invece, vorrei iniziare utilizzando un elemento standard di fianco al campo.

Quindi, se JavaScript è attivo, impostare una classe su di un antenato elemento che fa sì che alcuni nuovi stili da applicare che:

  • Relativamente posizionare un div che contiene l'input e l'etichetta
  • Assolutamente posizionare l'etichetta
  • Assolutamente la posizione di ingresso nella parte superiore dell'etichetta
  • Rimuovere i bordi di ingresso e impostare il colore di sfondo trasparente

Quindi, e anche ogni volta che l'ingresso perde la messa a fuoco, I test per vedere se l'ingresso ha un valore.Se lo fa, garantire che un antenato elemento ha una classe (ad es."hide-label"), in caso contrario verificare che non hanno classe.

Ogni volta che i guadagni di ingresso della messa a fuoco, set di classe.

Il foglio di stile sarebbe l'uso che classname in un selettore per nascondere l'etichetta (utilizzando text-indent:-9999px;di solito).

Questo approccio fornisce una discreta esperienza per tutti gli utenti, compresi quelli con JS disabilitato e quelli che utilizzano lettori di schermo.

Ho messo insieme le soluzioni proposte da @Cory Walker con le estensioni da @Rafael e la strega @Tex una forma è stato un po 'complicato per me e si avvicinò con una soluzione che si spera

A prova di errore con javascript e CSS disabilitati.

Si manipola con il colore di sfondo del campo modulo per mostrare / nascondere l'etichetta. 

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

Visualizza lo script in azione: 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">

Aggiungi un evento onblur troppo.

Quando si inizia a digitare sarà disappear.If vuota apparirà di nuovo. 

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

Il modo più semplice ...

Si prega di utilizzare PlaceHolder.JS le sue opere in tutti i browser e molto facile per i non HTML5 browser conformi   http://jamesallardice.github.io/Placeholders.js/

Un suggerimento circa le proprietà HTML segnaposto e il tag textarea, si prega di assicurarsi che non vi è alcun spazio tra <textarea> e </textarea>, altrimenti la segnaposto non funziona, per esempio:

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

Questo non funziona, perché c'è uno spazio tra...

utilizzare questo

stile: 

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

Basta ricordarsi di chiamare defaultLabelClean () prima presentare il modulo.

buon lavoro

Non hai bisogno di un codice JavaScript per questo ...
Credo che si intende l'attributo segnaposto. Ecco il codice: 

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



Il testo predefinito sarà grigio-ish e quando si fa clic, si scompariranno!

Credo che la sua buona per mantenere l'etichetta e non utilizzare segnaposto di cui sopra. La sua buona per UX come spiegare qui: https://www.smashingmagazine.com/2018/03 / UX-Contact-forme-essentials-conversioni /

Ecco ad esempio con il contrassegno all'interno Campi d'introduzione:  codepen.io/jdax/pen/mEBJNa

Ecco un semplice esempio, non fa altro che sovrapporre un'immagine (con qualsiasi espressione che volete). Ho visto questa tecnica da qualche parte. Sto usando la libreria prototipo di cui si avrebbe bisogno di modificare se si utilizza qualcosa di diverso. Con il caricamento dell'immagine dopo window.load non riesce con grazia se javascript è disattivato. 

<!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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top