HTML/CSS di input/textarea, testo predefinito, ed i colori

Question

due semi-Domande correlate:

1) che ho visto <input> e <textarea> scatole che contengono un testo predefinito, come "digitare i termini di ricerca qui", e nel momento in cui si fa clic sulla casella, il testo scompare. Come viene implementato? È una cosa Javascript?

2) Il testo predefinito può essere in un unico colore e qualsiasi cosa si digita (sovrascrittura o aggiunta), ha un colore diverso?

Answer 1

Non certo perché quanto sopra è contrassegnato come risposta, perché in realtà non rispondere alla domanda. Speriamo che questo fa:

HTML4

<label for="name">Name</label>  
<input type="text" name="name" value="Enter your full name" onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};" onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';}" /> 

Lets scomposizione:

value="Enter your full name"

Questo aggiunge una stringa di default del testo in input.

<textarea>Enter your comment</textarea> 

Lo stesso può essere ottenuto con un'area di testo inserendo il testo tra i tag.

onfocus="if(this.value=='Enter your full name') {this.value='', this.style.color='#999'};" 

Se l'ingresso riceve concentrarsi (es. Si fa clic o schede a) controlliamo se il testo di input corrente è uguale alla nostra stringa di testo predefinito "Inserisci il tuo nome e cognome". Se lo è, lo impostiamo come una stringa vuota e cambiamo il colore del carattere.

onblur="if(this.value=='') {this.value='Enter your full name', this.style.color='#555';} 

Quando l'ingresso perde concentriamo controlliamo se il testo di input corrente è vuota. Se lo è, torniamo alla nostra stringa di testo predefinita e cambiamo il colore al suo stato originale.

HTML5

<input type="text" name="name" placeholder="Enter your full name"> 
<textarea placeholder="Enter your comment"></textarea> 

HTML5 ha un 'segnaposto' attributo built-in per fare questo, che può essere disegnata nel modo seguente:

::-webkit-input-placeholder { color:#555; } /* Webkit */ 
:-moz-placeholder { color:#555; } /* Firefox <= 18 */ 
::-moz-placeholder { color:#555; } /* Firefox >= 19 */ 
:-ms-input-placeholder { color: #555; } /* Internet Explorer */ 

EXAMPLE

Answer 2

1. Sono chiamati filigrana di input. Puoi trovare molti plugin jQuery per farlo. Questo è one of them

2. per controllare il testo filigrana usando css