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

Question

Quiero que el cuadro de búsqueda de 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 en él, debería mostrarlo normalmente (negro, sin cursiva).Esto me ayudará a evitar el desorden al quitar la etiqueta.

Por cierto, esta es una página Ájax buscar, por lo que no tiene botón.

Answer 1

Otra opción, si está satisfecho con tener esta función sólo para los navegadores más nuevos, es utilizar el soporte que ofrece HTML 5. marcador de posición atributo:

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

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

Puedes probar demostraciones aquí y en Estilo de marcador de posición HTML5 con CSS.

Asegúrese de comprobar el compatibilidad del navegador con esta característica.La compatibilidad con Firefox se agregó en 3.7.Chrome está bien.Internet Explorer solo agregó soporte en 10.Si su objetivo es un navegador que no admite marcadores de posición de entrada, puede utilizar un complemento jQuery llamado Marcador de posición HTML5 de jQuery, y luego simplemente agregue el siguiente código JavaScript para habilitarlo.

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

Answer 2

Esto se conoce como marca de agua de cuadro de texto y se realiza mediante JavaScript.

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

o si usas jQuery, un enfoque mucho mejor:

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

Answer 3

Puedes configurar el marcador de posición utilizando el placeholder atributo en HTML (soporte del navegador).El font-style y color puede ser cambiado con CSS (aunque la compatibilidad con el navegador es limitada).

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">

Answer 4

Puede agregar y eliminar una clase CSS especial y modificar el valor de entrada onfocus/onblur con 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 un pista clase con el estilo que deseas en tu CSS, por ejemplo:

input.hint {
    color: grey;
}

Answer 5

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

Pero si desea una solución rápida y sencilla, 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 agregaron los colorantes solicitados.

Answer 6

publiqué una solución para esto en mi sitio web hace tiempo.Para usarlo, importa un solo .js archivo:

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

Luego, anote las entradas que desee para obtener sugerencias 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í.

Answer 7

Aquí hay un ejemplo funcional con el caché de la biblioteca Google Ajax y algo de magia de 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 que te intereses tanto en GAJAXLibs como en jQuery.

Answer 8

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

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

Answer 9

Para usuarios de jQuery:El enlace jQuery de Naspinski parece roto, pero prueba este:http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/

Obtienes un tutorial gratuito del complemento jQuery como beneficio adicional.:)

Answer 10

Encontré el complemento jQuery Marca de agua jQuery ser mejor que el que figura en la respuesta principal.¿Por qué mejor?Porque admite campos de entrada de contraseña.Además, configurar el color de la marca de agua (u otros atributos) es tan fácil como crear una .watermark referencia en su archivo CSS.

Answer 11

Esto se llama "marca de agua".

Encontré el complemento jQuery marca de agua 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).

Answer 12

Usar Notificador de formulario jQuery - es uno de los complementos de jQuery más populares y no sufre los errores que presentan algunas de las otras sugerencias de jQuery aquí (por ejemplo, puede diseñar libremente la marca de agua, sin preocuparse si se guardará en la base de datos).

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

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

Answer 13

Utilice una imagen de fondo para representar el texto:

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

Entonces todo lo que tienes que hacer es detectar value == 0 y 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");
        }
    });
});

Answer 14

Fácilmente podría hacer que un cuadro diga "Buscar" y luego, cuando se cambie el foco, se elimine 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.Entonces 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">

Answer 15

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

Cuando el cuadro de entrada reciba 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 desea utilizar 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();" />

Answer 16

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

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

Answer 17

Quieres asignar algo como esto a onfocus:

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

y esto para desenfocar:

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 algo de CSS como este:

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

Answer 18

$('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">

Answer 19

La etiqueta HTML "obligatoria" simple es útil.

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

Answer 20

Usuario AJAXToolkit de http://asp.net