javascript - quitar - Muestre el texto de ejemplo ''fantasma'' en un campo y luego desactívelo onblur

perdida de foco

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), simplemente 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 utilizar esto para proporcionar datos de campo de ejemplo para un formulario web.

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

Gracias SO Hive Mind!

Answer 1

Otra forma es usar algo de CSS, crear una imagen con el texto de fondo que desee y configurarla como imagen de fondo del cuadro de texto, y luego, cuando el cuadro de texto se enfoque, puede cambiar los estilos para eliminar esa imagen de fondo.

Answer 2

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

Probablemente exista una manera más elegante de hacerlo, pero esto supone que su cuadro no tiene texto en la carga de la página. Si lo hace, puede eliminar la primera línea.

No lo he probado, pero debería funcionar.

Answer 3

¿Por qué enrollar el suyo? Usa este plugin

Answer 4

<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 azotar esto para ti. jQuery lo haría más pequeño, estoy seguro, pero no lo uso.

Answer 5

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 6

Esta técnica se usa tan comúnmente que ahora se admite explícitamente en las especificaciones HTML a través del 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 de jquery que proporciona la implementación de shim que se puede encontrar aquí .

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