Muestre el texto de ejemplo 'fantasma' en un campo y luego bórrelo en Blur

Question

Estoy tratando de duplicar el efecto utilizado en el cuadro de búsqueda de Firefox donde, si el campo de búsqueda no tiene foco (el usuario no ha hecho clic dentro de él), solo dice Google en texto gris Luego, cuando el usuario hace clic en el cuadro, el texto se elimina y puede completar su término de búsqueda.

Quiero usar esto para proporcionar datos de campo de ejemplo para un formulario web.

La sintaxis de JQuery sería preferible a JavaScript simple, pero JS también estaría bien.

¡Gracias TAN colmena mente!

Answer 1

<style type='text/css'>
      input #ghost { color: #CCC; }
      input #normal { color: #OOO; }
</style>

<script type='text/javascript'> 
    function addTextHint(elem, hintText)
    {       
        if (elem.value == '')   
        {       
            elem.value = hintText;
            elem.style.className = 'ghost';
        }

        elem.onfocus = function ()
        {           
            if (elem.value == hintText)         
            {
                elem.value = '';
                elem.className = 'normal';
            }
        }

        elem.onblur = function ()
        {
            if (elem.value == '')
            {
                elem.value = hintText;
                elem.className = 'ghost';
            }
        }           
    }

    addTextHint(document.getElementById('foobar'),'Google');
</script>

Acabo de preparar esto para ti. jQuery lo haría más pequeño, estoy seguro, pero no lo uso.

Answer 2

Esta técnica se usa con tanta frecuencia que ahora se admite explícitamente en la especificación HTML a través del atributo de marcador de posición de la etiqueta de entrada:
Atributo de marcador de posición HTML

Ya es compatible con la mayoría de los navegadores y para los más antiguos hay un complemento jquery que proporciona una implementación de shim que puede aquí .

Para diseñar el texto del marcador de posición, consulte esto (se incluyen ejemplos en vivo):
Estilo de marcador de posición HTML5 con CSS

Answer 3

Otra forma es usar un poco de CSS, crear una imagen con el texto de fondo que desee y establecerla como la imagen de fondo del cuadro de texto, luego, cuando el cuadro de texto se enfoca, puede cambiar los estilos para eliminar esa imagen de fondo.

Answer 4

Implementación de JQuery

<input type="text" id = "textField" value="Google" class="RegularText GhostText" />

<style>
.GhostText{color:#DDD}
.RegularText{color:#CCC}
</style>

<script type="text/javascript" language="javascript">
$("#textField").blur(function(e){
    if ($.trim(e.target.value) == "") {
        e.target.value = e.target.defaultValue;
        e.target.toggleClass("GhostText");
    }
});
$("#textField").focus(function(e){
    if ($.trim(e.target.value) == e.target.defaultValue) {
        e.target.value = "";
        e.target.toggleClass("GhostText");
    }
});
</script>

Answer 5

¿Por qué rodar el tuyo? Utilice este complemento .

Answer 6

  $(selector).text('Google'); 
  $(selector).click(function(){
    $(this).text('');
  });

Probablemente haya una forma más elegante de hacerlo, pero esto supone que su casilla no tiene texto al cargar la página. Si lo hace, puede eliminar la primera línea.

No he probado esto, pero debería funcionar.