¿Puedes mostrar una pista gris en un cuadro de texto HTML con CSS solo?

Question

Usted ve estos cuadros de entrada de texto de vez en cuando en la web: una etiqueta gris se muestra dentro del cuadro, pero una vez que escribe allí, el texto gris desaparece. Esta página incluso tiene una: el campo "Título" se comporta exactamente así.

Por lo tanto, las preguntas:

1. ¿Existe un término estándar para esto? Realmente estoy luchando para encontrar algo en google

2. ¿Se puede hacer con solo CSS?

3. En caso de que así sea, ¿se puede hacer con JavaScript localizado? (es decir, código solo dentro de la etiqueta, no en el encabezado HTML).

Answer 1

El atributo "placeholder" es now supported en todos los principales navegadores.

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

Styling todavía parece requerir prefijos de proveedores:

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

se ve aquí: http://jsfiddle.net/webvitaly/bGrQ4/2/

Answer 2

No sé de una manera de hacerlo con CSS. Pero al mirar a la fuente de página, así lo está haciendo thusly-sabia:

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

La línea media que empieza con "onfocus" es donde el trabajo está ocurriendo. Cuando el campo de texto obtiene el foco, verifica si el valor predeterminado ("búsqueda") está allí. Si es así, establece el valor en '' (cadena vacía). De lo contrario, el texto no se verá afectado.

Un posible problema aquí es que si alguien intenta buscar la palabra "buscar", luego hace clic fuera de la caja y vuelve a hacer clic, el texto se restablece. No es un gran problema, pero algo a tener en cuenta mientras trabajas.

Answer 3

1. Las llamo etiquetas de entrada. No sé si se trata de una norma
2. Nop - se puede si se les permitiera elementos secundarios como tal

input { 
    position: relative; 
} 

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

input:focus label { 
    display: none; 
} 

Pero no se puede tener hijos de entradas (que yo sepa), por lo que no funcionará.

1. Sí, ver el enlace anterior (usando jQuery, pero trivial hacer sin)

Answer 4

Si desea que esta con HTML + CSS única, puede probar a usar el nuevo atributo de entrada HTML5 placeholder. Lamentablemente, este atributo no es ampliamente compatible, así que intente utilizar un script como Modernizr para detectar la compatibilidad del navegador para esta función con una característica como esta.

No recomendaría usar Javascript en línea para esto; es una mala práctica y va en contra del principio de separación de contenido y comportamiento. Usando jQuery, por ejemplo, algo como esto funcionará:

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

El nombre estándar es entrada de marca de agua.

siguen esta página si usted está interesado en jQuery http://digitalbush.com/projects/watermark-input-plugin/

Answer 6

Hay un HTML incorporado para nuevos navegadores.

sólo tiene que utilizar el atributo "marcador de posición":

< de entrada de id = tipo "caja de texto" = "text" marcador de posición = "texto de sugerencia aquí">

Answer 7

probablemente ya has encontrado la respuesta que está buscando, pero para otros esto puede ayudar a

<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"/> 

espero que esto ayude