texto fantasma - cómo tener en texto claro cuadro de texto

Question

Tengo un formulario en línea:

http://yoursdproperty.com/index.php?option=com_chronocontact&Itemid=56

me gustaría tener un poco de texto gris débil allí de modo que cuando el usuario hace clic en él, que desaparece

exactamente como en este formulario StackOverflow donde en el título de la pregunta dice "¿cuál es tu pregunta de programación, sé descriptivo?"

¿cuál es la forma más sencilla de implementar esto?

Answer 1

En HTML5, esto se logra muy fácilmente a través del atributo placeholder, aunque no estoy seguro de cuán ampliamente admitido está ahora.

Answer 2

No mencionaste jQuery ni ninguna otra estructura javascript, así que te voy a dar la solución de Javascript puro.

Alguna lógica booleana basada en el valor del cuadro para establecer el color de la fuente. Cuando el usuario hace clic en la entrada, si el valor es igual a su valor predeterminado, borra los contenidos. Si no es así, no haces nada. Cuando el usuario abandona la casilla, si los valores están vacíos, agregue su texto predeterminado de nuevo.

// Reference our element 
var txtContent = document.getElementById("content"); 
// Set our default text 
var defaultText = "Please enter a value."; 

// Set default state of input 
txtContent.value = defaultText; 
txtContent.style.color = "#CCC"; 

// Apply onfocus logic 
txtContent.onfocus = function() { 
    // If the current value is our default value 
    if (this.value == defaultText) { 
    // clear it and set the text color to black 
    this.value = ""; 
    this.style.color = "#000"; 
    } 
} 

// Apply onblur logic 
txtContent.onblur = function() { 
    // If the current value is empty 
    if (this.value == "") { 
    // set it to our default value and lighten the color 
    this.value = defaultText; 
    this.style.color = "#CCC"; 
    } 
} 

Answer 3

Puedes usar this jQuery plugin.