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

222

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

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

3
  • 4
    desde que se hizo la pregunta, el atributo de marcador de posición HTML5 se ha convertido en compatible con todos los navegadores.
    Jasen
    20 de agosto de 2015 a las 1:52
  • Hola Michael. ¿Estaría dispuesto a cambiar la respuesta aceptada en esta página? Parece haber un ganador claro, que es diferente a la respuesta aceptada.
    null
    8 de septiembre de 2016 a las 5:36
  • El problema con una solución de JavaScript es que no todo el mundo tiene JavaScript activado. El marcador de posición no desaparece cuando el cuadro de texto se enfoca si se usa un complemento de navegador como NoScript (muy útil para que los desarrolladores lo tengan instalado). La opción de marcador de posición es la solución más sólida. 22 mar 2017 a las 13:06
379

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

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

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

ingrese la descripción de la imagen aquí

Puede probar demostraciones aquí y en HTML5 Placeholder Styling con CSS .

Asegúrese de verificar la compatibilidad del navegador con 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 marcador de posición HTML5 jQuery y luego simplemente agregar el siguiente código JavaScript para habilitarlo.

$('input[placeholder], textarea[placeholder]').placeholder();
4
  • @Duke, funciona en Fx3.7 +, (Safari / Chrome) y Opera. IE9 no lo admite, así que supongo que IE8 tampoco. 8 de mayo de 2011 y 11:09
  • Sí, acabo de descubrir hoy que FF3.6 no lo admite. 8 de mayo de 2011 a las 5:57 pm
  • Creo que se movió de nuevo. Lo encontré aquí: github.com/mathiasbynens/jquery-placeholder
    jocull
    13 feb 2013 a las 15:03
  • El desarrollador de la advertencia "Internet Explorer 10 y 11 no muestran el marcador de posición cuando el campo está enfocado, incluso si el campo está vacío". 13/01/15 a las 17:00
92

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

o si usa jQuery, un enfoque mucho mejor:

10
  • 4
    Ese segundo vínculo está roto. Esto podría ser similar: digitalbush.com/projects/watermark-input-plugin 10 de mayo de 2009 a las 17:11
  • 14
    Encontré otro enfoque de jQuery. este proyecto está alojado en @ code.google.com/p/jquery-watermark 17/08/10 a las 13:19
  • 4
    El complemento digitalbrush guardará la 'marca de agua' en la base de datos. Está en versión beta y no se ha actualizado desde 2007. En su lugar, recomiendo usar code.google.com/p/jquery-watermark como sugirió @JP. 25 de agosto de 2010 a las 1:34
  • 1
    Creo que el autor de la pregunta debería volver atrás y marcar el comentario de @JP como la mejor respuesta.
    Randy L
    30 de septiembre de 2010 a las 23:22
  • 2
    El complemento de marca de agua jQuery es bastante novato porque no maneja el caso en el que la entrada es la misma que el valor precargado. En ese caso, el texto de entrada vuelve a ser gris.
    atp
    27/10/10 a las 1:38
41

Puede establecer el marcador de posición utilizando el placeholderatributo en HTML ( compatibilidad con el navegador ). El font-styley colorse puede cambiar 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">
2
  • Estaba buscando esto, ta - más información diveintohtml5.org/forms.html#placeholder 15/10/10 a las 9:36
  • 2
    Esta debería ser ahora la respuesta aceptada. Es posible que el atributo de marcador de posición no haya sido ampliamente admitido cuando se publicó originalmente en 2010, pero ahora es compatible con todos los navegadores actuales, excepto IE8.
    JSP64
    9 de junio de 2015 a las 1:37
20

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 sugerencia con el estilo que desee en su CSS, por ejemplo:

input.hint {
    color: grey;
}
1
6

La mejor manera es conectar sus eventos JavaScript usando algún tipo de biblioteca JavaScript como jQuery o YUI y poner 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 : se agregaron las cosas para colorear solicitadas.

2
  • Esto está bien para las búsquedas, pero en muchos casos no desea que se envíen marcas de agua en ningún evento de envío. 25/08/10 a las 18:28
  • @ k.robinson I +1 en esa declaración. Este fue el código más rápido y compacto en ese momento. Podría resolverse de manera más detallada con un bloque de código javascript. 26/08/10 a las 7:44
4

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 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 ejemplos están disponibles aquí .

4
  • 1
    Pero está roto. Si ingreso el mismo texto que fue la sugerencia, se comporta como si no se hubiera ingresado (si entro y salgo de él nuevamente) 10/08/10 a las 19:23
  • 2
    @ Stephan: Sí, esa es la única advertencia que conozco. ¿De verdad ha encontrado que eso es un problema en la práctica? Si es así, es posible que deba investigar cómo colocar un div arriba y mostrarlo / ocultarlo. Esta es la solución más simple que conozco. También se degrada muy bien si JavaScript está deshabilitado. 10/08/10 a las 22:35
  • Me activó la configuración del valor. Tengo una necesidad combinada de pre-llenado con un valor existente o predeterminado y una pista cuando el cuadro de texto está vacío 11/08/10 a las 7:46
  • @ Stephan: De hecho, me encontré con la necesidad de esto hoy y estoy buscando complementos de jQuery. El que está vinculado en la respuesta aceptada sufre el mismo problema que el mío. ¿Conoces alguna alternativa? 22/08/10 a las 20:51
3

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 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 se interese tanto en GAJAXLibs como en jQuery.

3

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

2

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

Obtienes un tutorial gratuito sobre el complemento de jQuery como bonificación. :)

1
  • Utilizo el complemento de Remy en tripfootprint.com y funciona muy bien; Me encanta que sea lo suficientemente simple como para seguirlo y asimilarlo.
    Anirvan
    12/10/10 a las 23:58
2

Encontré que el complemento jQuery jQuery Watermark es mejor que el que figura en la respuesta principal. ¿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.

2

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 necesita una llamada especial antes de enviar el formulario).

2

Use jQuery Form Notifier : es uno de los complementos de jQuery más populares y no sufre los errores que tienen algunas de las otras sugerencias de jQuery 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 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 afectaron los cuadros de texto, no lo que yo quería). La ventaja de jQuery Watermark es que puede 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 le recomiendo encarecidamente que no lo haga.

1

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 value == 0y aplicar la clase correcta:

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

Y el código JavaScript de jQuery 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");
        }
    });
});
1

Podrías hacer que un cuadro dijera "Buscar" fácilmente y luego, cuando se cambie el enfoque, 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. 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">
1

Puede utilizar un atributo llamado placeholder="" Aquí hay una demostración:

<html>
<body>
// try this out!
<input placeholder="This is my placeholder"/>
</body>
</html>

0

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

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

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

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

Con algo de CSS como este:

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

Estoy usando una solución javascript simple de una línea que funciona muy bien. Aquí hay un ejemplo tanto para el cuadro de texto como para el área de texto:

    <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, comprobar que el valor del campo no es "Texto".

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

La etiqueta Html 'requerida' simple 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

1
  • Si bien es útil, no tiene nada que ver con la pregunta.
    Quentin
    27 de septiembre de 2017 a las 11:35
-3

Usuario AJAXToolkit de http://asp.net

0