HTML/CSS de entrada/área de texto, texto por defecto, y los colores

Question

dos preguntas semi-relacionados:

1) que he visto <input> y <textarea> cajas que contienen algo de texto predeterminado, como "introducir términos de búsqueda aquí", y en el momento en que hace clic en el cuadro, el texto desaparece. ¿Cómo se implementa esto? ¿Esto es algo de Javascript?

2) ¿El texto predeterminado puede estar en un color, y lo que escribas (ya sea sobrescribiendo o añadiendo), ¿tiene un color diferente?

Answer 1

No sé por qué lo anterior se marca como respondida, ya que en realidad no responde a la pregunta. Con suerte esto:

HTML 4

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

value="Enter your full name"

Esto añade una cadena por defecto de texto en su entrada.

<textarea>Enter your comment</textarea> 

Lo mismo se puede lograr con un área de texto ingresando el texto entre las etiquetas.

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

Si la entrada recibe el foco (es decir., O se hace clic con pestañas a), comprobamos si el texto de entrada actual es igual a nuestra cadena de texto por defecto "Introduzca su nombre completo". Si es así, lo configuramos como una cadena vacía y cambiamos el color de la fuente.

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

Cuando la entrada pierde el foco, verificamos si el texto de entrada actual está en blanco. Si es así, cambiamos a nuestra cadena de texto predeterminada y cambiamos el color a su estado original.

HTML5

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

HTML5 tiene un "marcador de posición integrado en un atributo para hacer esto, que puede ser de estilo de la siguiente manera:

::-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. Se llaman marca de agua de entrada. Puedes encontrar muchos plugins jquery para hacerlo. Esta es one of them

2. Usted puede controlar texto de la marca con css