HTML/CSS-Eingabe/Textbereich, Standardtext und Farben

Question

Zwei halb-Fragen:

1) Ich habe <input> und <textarea> Boxen gesehen, dass einige Standard-Text enthalten, wie „Suchbegriffe hier eingeben“, und Sobald Sie auf das Feld klicken, verschwindet der Text. Wie wird dies umgesetzt? Ist das eine Javascript-Sache?

2) Kann der Standardtext in einer Farbe sein und was auch immer Sie tippen (entweder überschreiben oder anhängen), in einer anderen Farbe sein?

Answer 1

nicht sicher, warum über die gekennzeichnet ist als beantwortet, weil es eigentlich nicht die Frage beantworten. Hoffentlich tut:

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';}" /> 

es Lets brechen:

value="Enter your full name"

Dieses eine Standard-Textzeichenfolge in Ihrer Eingabe erstellt.

<textarea>Enter your comment</textarea> 

Das Gleiche kann mit einem Textarea erreicht werden, indem Sie Ihren Text zwischen den Tags eingeben.

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

Wenn der Eingang des Fokus erhält (dh. Geklickt wird oder Tabbed auf) überprüfen wir, ob der aktuelle Eingabe von Text zu unserer Standardtextzeichenfolge „Geben Sie Ihren vollständigen Namen“ gleich ist. Wenn dies der Fall ist, legen wir eine leere Zeichenfolge fest und ändern die Schriftfarbe.

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

wenn der Eingabefokus verliert wir prüfen, ob der aktuelle Eingabetext leer ist. Wenn dies der Fall ist, wechseln wir zurück zu unserer Standard-Textzeichenfolge und ändern die Farbe in ihren ursprünglichen Zustand zurück.

HTML5

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

HTML5 hat eine eingebaute 'Platzhalter' Attribut, dies zu tun, die in der folgenden Art und Weise gestaltet werden kann:

::-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. Sie werden Eingabe Wasserzeichen genannt. Sie können eine Menge jquery plugins dafür finden. Dies ist one of them

2. Sie Wasserzeichen Text mit CSS steuern