Riesci a mostrare un suggerimento grigio in una casella di testo HTML con il solo CSS?

Question

Si vedono queste caselle di testo di volta in volta sul web: un'etichetta grigia è mostrata all'interno della scatola, ma una volta che si digita lì, il testo grigio scompare. Questa pagina ne ha anche una: il campo "Titolo" si comporta esattamente così.

Quindi, domande:

1. c'è un termine standard per questo? Sto davvero cercando di trovare qualcosa su google

2. Si può fare solo con i CSS?

3. In caso contrario, può essere eseguito con JavaScript localizzato? (cioè, codice appena all'interno del tag, non nell'intestazione HTML).

Answer 1

L'attributo "placeholder" è now supported tutti i principali browser.

<form> 
<input type="text" placeholder="placeholder text"> 
</form>​ 

Styling sembra ancora richiedere prefissi vendor:

input::-webkit-input-placeholder { 
    color: #59e; 
}  
input:-moz-placeholder { 
    color: #59e; 
} 
​ 

visto qui: http://jsfiddle.net/webvitaly/bGrQ4/2/

Answer 2

Non conosco un modo per farlo con i CSS. Ma guardando il sorgente della pagina, SO sta facendo questa convenzione-saggio:

<input name="q" class="textbox" tabindex="1" 
     onfocus="if (this.value=='search') this.value = ''" 
     type="text" maxlength="80" size="28" value="search"> 

La linea mediana che comincia con "onfocus" è dove il lavoro sta accadendo. Quando il campo di testo diventa attivo, controlla se il valore predefinito ("ricerca") è presente. In tal caso, imposta il valore su "(stringa vuota). Altrimenti, il testo non è interessato.

Un potenziale problema qui è che se qualcuno sta cercando di cercare la parola "ricerca", quindi fa clic fuori dalla casella e fa nuovamente clic su di nuovo, il testo viene reimpostato. Non è un grosso problema, ma qualcosa da tenere a mente mentre lavori.

Answer 3

1. Io li chiamo etichette di input. Non so se si tratta di uno standard
2. No - si potrebbe, se sono stati autorizzati gli elementi figlio in questo modo

input { 
    position: relative; 
} 

input label { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

input:focus label { 
    display: none; 
} 

Ma non si può avere figli di ingressi (per quanto ne so), quindi non funzionerà.

1. Sì, si veda il link qui sopra (utilizzando jQuery, ma banalmente fatto senza)

Answer 4

Se volete questo con HTML + CSS solo, si può provare a utilizzare il nuovo attributo di ingresso HTML5 placeholder. Sfortunatamente questo attributo non è ampiamente supportato, quindi prova a utilizzare uno script come Modernizr per rilevare il supporto del browser per questa funzione per una funzionalità come questa.

Non consiglierei di usare Javascript inline per questo: è una cattiva pratica e va contro il principio di separazione di contenuto e comportamento. Ad esempio, con jQuery funziona qualcosa di simile:

var input = $('input[name="search"]'); 
var placeHolder = input.attr('placeholder'); 

input.val(placeHolder); 

input.focus(function(){ 
    this.value = ''; 
}).blur(function(){ 
    if(this.value === '') this.value = placeHolder; 
}); 

Answer 5

Il nome standard è l'inserimento di filigrana.

seguono questa pagina, se siete interessati a JQuery http://digitalbush.com/projects/watermark-input-plugin/

Answer 6

C'è un HTML integrato per i nuovi browser.

Basta utilizzare l'attributo "placeholder":

< ingresso id = tipo "InputBox" = "testo" segnaposto = "Hint testo qui">

Answer 7

probabilmente avete già trovato la risposta si è cercando, ma per gli altri questo può aiutare

<script> 
    function inputFocus(i){ 
     if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; } 
    } 
    function inputBlur(i){ 
     if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; } 
    } 
</script> 

...

<input type ="text"onfocus="inputFocus(this)" onblur="inputBlur(this)" value="Some Text"/> 

spero che questo aiuti