HTML/CSS wejścia/textarea, domyślny tekst i kolory

Question

dwóch powiązanych półfabrykaty pytania:

1) widziałem <input> i <textarea> pudełka, które zawierają pewien tekst domyślny, jak „wejść haseł tutaj”, a w momencie kliknięcia na pole tekst znika. W jaki sposób jest to realizowane? Czy to jest JavaScript?

2) Czy domyślny tekst może być w jednym kolorze, a cokolwiek napiszesz (nadpisanie lub dodanie), będzie miało inny kolor?

Answer 1

Nie wiem, dlaczego powyżej jest oznaczony jako odpowiedzi, ponieważ w rzeczywistości nie odpowiedzieć na pytanie. Mam nadzieję, że to robi:

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

Umożliwia rozbicie go:

value="Enter your full name"

Dodaje domyślny ciąg tekstu w wejściu.

<textarea>Enter your comment</textarea> 

To samo można osiągnąć za pomocą pola tekstowego, wprowadzając tekst między tagami.

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

Jeśli wejście odbiera skupić (tj. Kliknięcia lub na kartach) możemy sprawdzić, czy obecny tekst wejściowy jest równy naszej domyślny ciąg tekstowy „Wpisz swoje imię i nazwisko”. Jeśli tak, ustawiamy go jako pusty ciąg i zmieniamy kolor czcionki.

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

Gdy wejście traci ostrość, sprawdzamy, czy obecny tekst wejściowy jest pusty. Jeśli to nastąpi, powracamy do domyślnego ciągu tekstowego i zmieniamy kolor z powrotem do jego oryginalnego stanu.

HTML5

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

HTML5 ma wbudowany 'zastępczy' atrybut ten sposób, który może być urządzone w sposób następujący:

::-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. Nazywane są wprowadzanym znakiem wodnym. Możesz znaleźć wiele wtyczek jQuery do robienia tego. To one of them

2. Można kontrolować tekst znaku wodnego za pomocą CSS