¿Cómo hago que un cuadro de texto HTML muestre una pista cuando está vacío?

Quiero que el cuadro de búsqueda en mi página web muestre la palabra "Buscar" en cursiva gris. Cuando el cuadro recibe el foco, debería verse como un cuadro de texto vacío. Si ya hay texto, debe mostrar el texto normalmente (negro, sin cursiva). Esto me ayudará a evitar el desorden quitando la etiqueta.

Por cierto, esta es una búsqueda de Ajax en la página , por lo que no tiene botón.

Otra opción, si está contento de tener esta característica solo para los navegadores más nuevos, es utilizar el soporte ofrecido por el atributo de marcador de posición de HTML 5 :

<input name="email" placeholder="Email Address">

En ausencia de cualquier estilo, en Chrome esto se ve así:

Puedes probar demos aquí y en HTML5 Placeholder Styling con CSS .

Asegúrese de verificar la compatibilidad del navegador de esta función . El soporte en Firefox se agregó en 3.7. Chrome está bien. Internet Explorer solo agregó soporte en 10. Si apunta a un navegador que no admite marcadores de posición de entrada, puede usar un complemento jQuery llamado jQuery HTML5 Placeholder , y luego simplemente agregue el siguiente código JavaScript para habilitarlo.

$('input[placeholder], textarea[placeholder]').placeholder();

Eso se conoce como marca de agua de cuadro de texto, y se realiza a través de JavaScript.

• http://naspinski.net/post/Text-Input-Watermarks-using-Javascript-(IE-Compatible).aspx

o si usa jQuery, un enfoque mucho mejor:

• http://digitalbush.com/projects/watermark-input-plugin/
• o code.google.com/p/jquery-watermark

Puede establecer el marcador de posición utilizando el placeholderatributo en HTML ( soporte del navegador ). El font-styley colorse puede cambiar con CSS (aunque el soporte del navegador es limitado).

input[type=search]::-webkit-input-placeholder { /* Safari, Chrome(, Opera?) */
 color:gray;
 font-style:italic;
}
input[type=search]:-moz-placeholder { /* Firefox 18- */
 color:gray;
 font-style:italic;
}
input[type=search]::-moz-placeholder { /* Firefox 19+ */
 color:gray;
 font-style:italic;
}
input[type=search]:-ms-input-placeholder { /* IE (10+?) */
 color:gray;
 font-style:italic;
}

<input placeholder="Search" type="search" name="q">

Puede agregar y eliminar una clase CSS especial y modificar el valor de entrada onfocus/ onblurcon JavaScript:

<input type="text" class="hint" value="Search..."
    onfocus="if (this.className=='hint') { this.className = ''; this.value = ''; }"
    onblur="if (this.value == '') { this.className = 'hint'; this.value = 'Search...'; }">

Luego, especifique una clase de pista con el estilo que desea en su CSS, por ejemplo:

input.hint {
    color: grey;
}

La mejor manera es conectar sus eventos de JavaScript utilizando algún tipo de biblioteca de JavaScript como jQuery o YUI y colocar su código en un archivo externo .js.

Pero si desea una solución rápida y sucia, esta es su solución HTML en línea:

<input type="text" id="textbox" value="Search"
    onclick="if(this.value=='Search'){this.value=''; this.style.color='#000'}" 
    onblur="if(this.value==''){this.value='Search'; this.style.color='#555'}" />

Actualizado : se agregó el material para colorear solicitado.

Publiqué una solución para esto en mi sitio web hace algún tiempo. Para usarlo, importe un solo .jsarchivo:

<script type="text/javascript" src="/hint-textbox.js"></script>

Luego anote cualquier entrada que desee tener pistas con la clase CSS hintTextbox:

<input type="text" name="email" value="enter email" class="hintTextbox" />

Más información y ejemplos están disponibles aquí .

Aquí hay un ejemplo funcional con el caché de la biblioteca de Google Ajax y algo de magia jQuery.

Este sería el CSS:

<style type="text/stylesheet" media="screen">
    .inputblank { color:gray; }  /* Class to use for blank input */
</style>

Este sería el código JavaScript:

<script language="javascript"
        type="text/javascript"
        src="http://www.google.com/jsapi">
</script>
<script>
    // Load jQuery
    google.load("jquery", "1");

    google.setOnLoadCallback(function() {
        $("#search_form")
            .submit(function() {
                alert("Submitted. Value= " + $("input:first").val());
                return false;
        });

        $("#keywords")
            .focus(function() {
                if ($(this).val() == 'Search') {
                    $(this)
                    .removeClass('inputblank')
                    .val('');
                }
            })
            .blur(function() {
                if ($(this).val() == '') {
                    $(this)
                    .addClass('inputblank')
                    .val('Search');
                }
            });
    });
</script>

Y este sería el HTML:

<form id="search_form">
    <fieldset>
        <legend>Search the site</legend>
            <label for="keywords">Keywords:</label>
        <input id="keywords" type="text" class="inputblank" value="Search"/>
    </fieldset>
</form>

Espero que sea suficiente para interesarle tanto en GAJAXLibs como en jQuery.

Ahora se vuelve muy fácil. En html podemos dar el atributo de marcador de posición para los elementos de entrada .

p.ej

<input type="text" name="fst_name" placeholder="First Name"/>

consulte para obtener más detalles: http://www.w3schools.com/tags/att_input_placeholder.asp

Para usuarios de jQuery: el enlace jQuery de naspinski parece roto, pero intente con este: http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Obtendrá un tutorial gratuito sobre el complemento jQuery como bonificación. :)

Encontré que el complemento jQuery jQuery Watermark es mejor que el que aparece en la respuesta superior. ¿Por qué mejor? Porque admite campos de entrada de contraseña. Además, establecer el color de la marca de agua (u otros atributos) es tan fácil como crear una .watermarkreferencia en su archivo CSS.

Esto se llama "marca de agua".

Encontré la marca de agua jQuery plugin jQuery que, a diferencia de la primera respuesta, no requiere configuración adicional (la respuesta original también necesita una llamada especial antes de enviar el formulario).

Use jQuery Form Notifier : es uno de los complementos más populares de jQuery y no sufre los errores que algunas de las otras sugerencias de jQuery hacen aquí (por ejemplo, puede diseñar libremente la marca de agua, sin preocuparse si se guardará en el base de datos).

jQuery Watermark usa un único estilo CSS directamente en los elementos del formulario (noté que las propiedades de tamaño de fuente CSS aplicadas a la marca de agua también afectaron los cuadros de texto, no lo que quería). La ventaja de jQuery Watermark es que puede arrastrar y soltar texto en los campos (jQuery Form Notifier no lo permite).

Otro sugerido por otros (el que está en digitalbrush.com), enviará accidentalmente el valor de la marca de agua a su formulario, por lo que le recomiendo que no lo haga.

Use una imagen de fondo para representar el texto:

 input.foo { }
 input.fooempty { background-image: url("blah.png"); }

Entonces todo lo que tiene que hacer es detectar value == 0y aplicar la clase correcta:

 <input class="foo fooempty" value="" type="text" name="bar" />

Y el código jQuery JavaScript se ve así:

jQuery(function($)
{
    var target = $("input.foo");
    target.bind("change", function()
    {
        if( target.val().length > 1 )
        {
            target.addClass("fooempty");
        }
        else
        {
            target.removeClass("fooempty");
        }
    });
});

Puede hacer que un cuadro lea "Buscar" y luego, cuando se cambie el foco, se eliminará el texto. Algo como esto:

<input onfocus="this.value=''" type="text" value="Search" />

Por supuesto, si lo hace, el propio texto del usuario desaparecerá cuando haga clic. Así que probablemente quieras usar algo más robusto:

<input name="keyword_" type="text" size="25"  style="color:#999;" maxlength="128" id="keyword_"
onblur="this.value = this.value || this.defaultValue; this.style.color = '#999';"
onfocus="this.value=''; this.style.color = '#000';"
value="Search Term">

Cuando se cargue la página por primera vez, haga que aparezca Buscar en el cuadro de texto, de color gris si así lo desea.

Cuando el cuadro de entrada recibe el foco, seleccione todo el texto en el cuadro de búsqueda para que el usuario pueda comenzar a escribir, lo que eliminará el texto seleccionado en el proceso. Esto también funcionará bien si el usuario quiere usar el cuadro de búsqueda por segunda vez, ya que no tendrá que resaltar manualmente el texto anterior para eliminarlo.

<input type="text" value="Search" onfocus="this.select();" />

Me gusta la solución de "Knowledge Chikuse": simple y clara. Solo necesita agregar una llamada para desenfocar cuando la carga de la página está lista, lo que establecerá el estado inicial:

$('input[value="text"]').blur();

Desea asignar algo como esto a onfocus:

if (this.value == this.defaultValue)
    this.value = ''
this.className = ''

y esto para onblur:

if (this.value == '')
    this.value = this.defaultValue
this.className = 'placeholder'

(Puede usar algo un poco más inteligente, como una función de marco, para cambiar el nombre de clase si lo desea).

Con algunos CSS como este:

input.placeholder{
    color: gray;
    font-style: italic;
}

Estoy usando una solución javascript simple de una línea que funciona muy bien. Aquí hay un ejemplo tanto para textbox como para textarea:

    <textarea onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">Text</textarea>

    <input type="text" value="Text" onfocus="if (this.value == 'Text') { this.value = ''; }" onblur="if (this.value == '') { this.value = 'Text'; }">

El único "inconveniente" es validar en $ _POST o en la validación de Javascript antes de hacer algo con el valor del campo. Es decir, verificar que el valor del campo no sea "Texto".

$('input[value="text"]').focus(function(){ 
if ($(this).attr('class')=='hint') 
{ 
   $(this).removeClass('hint'); 
   $(this).val(''); 
}
});

$('input[value="text"]').blur(function(){
  if($(this).val() == '')
  {
    $(this).addClass('hint');
    $(this).val($(this).attr('title'));
  } 
});

<input type="text" value="" title="Default Watermark Text">

La etiqueta simple 'requerido' de HTML es útil.

<form>
<input type="text" name="test" id="test" required>
<input type="submit" value="enter">
</form>

Especifica que se debe completar un campo de entrada antes de enviar el formulario o presionar el botón enviar. Aquí hay un ejemplo

Usuario AJAXToolkit de http://asp.net