javascript - mas - ¿Cómo puedo hacer que un cuadro de texto HTML muestre una pista cuando esté vacío?

input html

Question

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, debe verse como un cuadro de texto vacío. Si ya hay texto en él, debería mostrar el texto normalmente (negro, no cursiva). Esto me ayudará a evitar el desorden al quitar la etiqueta.

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

Answer 1

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

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

Answer 2

Aquí hay un ejemplo funcional con la memoria caché de la biblioteca Ajax de Google 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 de 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 hacer que se interesen tanto en GAJAXLibs como en jQuery.

Answer 3

Cuando la página se carga por primera vez, haga que la búsqueda aparezca en el cuadro de texto, de color gris si desea que aparezca.

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 desea 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();" />

Answer 4

Encontré que el complemento code.google.com/p/jquery-watermark es mejor que el que figura en la respuesta superior. Por que mejor Porque soporta 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 referencia de .watermark en su archivo CSS.

Answer 5

Eso se conoce como marca de agua de un 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

Answer 6

Esto se llama "marca de agua".

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

Answer 7

Fácilmente puede hacer que una casilla lea "Buscar" y luego, cuando se cambia el enfoque, se elimina el texto. Algo como esto:

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

Por supuesto, si lo haces, 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">

Answer 8

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

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

Answer 9

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

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 : Añadido el coloreado solicitado.

Answer 10

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();

Answer 11

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

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

En ausencia de estilos, en Chrome esto se parece a:

Puede probar las demostraciones here y en HTML5 Placeholder Styling con CSS .

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

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

Answer 12

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

Obtienes un tutorial gratuito de jQuery plugin como bonificación. :)

Answer 13

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

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

Luego anote las entradas que desee que tengan sugerencias con la clase CSS hintTextbox :

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

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

Answer 14

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 una clase de pista con el estilo que desea en su CSS, por ejemplo:

input.hint {
    color: grey;
}

Answer 15

Puede establecer el marcador de posición utilizando el atributo de placeholder en HTML ( compatibilidad con el navegador ). El font-style y el color font-style se pueden 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">

Answer 16

Quieres 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 hacer el cambio de nombre de clase si lo desea).

Con algunos CSS como este:

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

Answer 17

Usa una imagen de fondo para renderizar el texto:

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

Entonces todo lo que tienes que hacer es detectar el 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 18

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

jQuery Watermark usa un solo 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 afectaban a los cuadros de texto, no a 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 algunos otros (el de digitalbrush.com), enviará accidentalmente el valor de la marca de agua a su formulario, por lo que lo recomiendo enérgicamente.

Answer 19

Usuario AJAXToolkit de http://asp.net

Answer 20

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