Tener texto que se borra al hacer clic en él

Question

Me gustaría saber cómo implementar algo así como el desbordamiento de pila cuando publica una pregunta: "Al menos una etiqueta como (css html asp.net), máx. 5 etiquetas.

¿Cómo puedo implementar algo como esto para una entrada de texto en html, donde se desvaneció en parte, pero cuando se escribe, que no se presenta, y no se desvaneció.

no me importa cómo para hacer esto, siempre y cuando funciona.

Gracias.

Answer 1

La opción más sencilla es utilizar el atributo placeholder:

<input type="text" placeholder="At least one tag, such as 'html', 'asp.net', max five tags." /> 

JS Fiddle demo.

Si compatibilidad cruzada es un requisito, entonces JavaScript es también una opción:

var inputs = document.getElementsByTagName('input'); 

for (i=0; i<inputs.length; i++){ 
    if (inputs[i].hasAttribute('data-hint')){ 
     inputs[i].value = inputs[i].getAttribute('data-hint'); 
      inputs[i].style.color = '#999'; 

     inputs[i].onclick = function(){ 
      this.value = ''; 
     }; 
     inputs[i].onblur = function(){ 
      if (this.value == '' || this.value == this.getAttribute('data-hint')){ 
       this.value = this.getAttribute('data-hint'); 
       this.style.color = '#000'; 
      } 
     }; 
    } 
} 

JS Fiddle demo.

O, con jQuery:

$('input:text').each(
    function(){ 
     $(this).val($(this).attr('data-hint')); 
      $(this).css('color','#999'); 
    }).click(
    function(){ 
     $(this).val(''); 
      $(this).css('color','#000'); 
    }).blur(
    function(){ 
     if ($(this).val() == ''){ 
      $(this).val($(this).attr('data-hint')); 
      $(this).css('color','#999'); 
     } 
    }); 

JS Fiddle demo.

Referencias:

• Common Input Element Attributes (W3.org).

vainilla JavaScript:

• document.getElementsByTagName().
• element.onblur.
• element.onfocus.
• element.hasAttribute().
• element.getAttribute().
• element.style.

jQuery:

• text-input (:text) selector.
• .each().
• .val().
• .css().
• .attr().

Answer 2

<input type="text" name="booga" placeholder="This is default text" /> 

Answer 3

<input type="text" placeholder="Your text here" /> 

Requiere navegador hasta a la fecha, pero no utiliza ningún código de ningún tipo.

Answer 4

<input type="text" placeholder="Default text goes here..."/> 

Como @ respuesta de Kolink explica, hacer esto requiere un navegador actualizado, pero no lo utiliza código.