¿Cómo puedo hacer que un cuadro de texto HTML muestre una sugerencia cuando está vacío?

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, debe mostrar el texto normalmente (negro, sin cursivas). Esto me ayudará a evitar el desorden al eliminar la etiqueta.

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

Answer 1

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

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

En ausencia de cualquier estilo, en Chrome será similar a:

puede probar demos a cabo here y en HTML5 Placeholder Styling with CSS.

Asegúrese de consultar browser compatibility of this feature. Se agregó soporte en Firefox 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 simplemente agregue el siguiente código JavaScript para habilitarlo.

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

Answer 2

Puede agregar y quitar una clase especial CSS 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...'; }"> 

a continuación, especifique una clase pista con el estilo que desee en su CSS, por ejemplo:

input.hint { 
    color: grey; 
} 

Answer 3

Puede leer fácilmente un cuadro que dice "Buscar" y luego, cuando se cambia el foco, se quita el texto. Algo como esto:

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

Por supuesto, si usted hace que el propio texto del usuario desaparecerá cuando se haga clic. Así que es probable que desee 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 4

La mejor manera es que cablear los eventos de JavaScript utilizando algún tipo de biblioteca de JavaScript como jQuery o YUI y poner su código en un Js-archivo externo.

Pero si quieres una solución rápida y sucia, que es vuestro HTML en línea solución:

<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: le añadieron el color-material solicitado.

Answer 5

utilizar 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 == 0 y aplicar la clase derecha:

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

Y el código jQuery JavaScript parece a esto :

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

Answer 6

Quieres asignar algo como esto a onfoc nosotros:

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

y esto a onBlur:

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

(se puede usar algo de una inteligente poco, 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 7

Esto se conoce como una marca de agua de cuadro de texto, y se hace a través de JavaScript.

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

o si utiliza jQuery, un enfoque mucho mejor:

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

Answer 8

Cuando la página se carga por primera, tienen Buscar aparecer en el texto bo x, color gris si quieres que sea.

Cuando el cuadro de entrada recibe el foco, seleccionar todo el texto en el cuadro de búsqueda para que el usuario sólo puede empezar a escribir, lo que eliminará el texto seleccionado en el proceso. Esto también funciona muy bien si el usuario desea utilizar la caja de búsqueda de una segunda vez, ya que no tendrán que resaltar manualmente el texto anterior para eliminarlo.

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

Answer 9

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

Ésta sería la CSS:

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

Esto 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 lo suficientemente para que se interesa tanto en el GAJAXLibs y en jQuery.

Answer 10

AJAXToolkit usuario de http://asp.net

Answer 11

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

usted conseguir un plugin de jQuery libre tutorial como un bono. :)

Answer 12

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

Esto se llama "marca de agua".

me encontré con el plugin jQuery jQuery watermark el cual, a diferencia de la primera respuesta, no requiere configuración adicional (la respuesta original también necesita un llamado especial a antes de enviar el formulario).

Answer 14

Encontré el complemento jQuery jQuery Watermark para ser mejor que el que se encuentra en la parte 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 referencia .watermark en su archivo CSS.

Answer 15

he publicado a solution for this on my website hace algún tiempo.Para usarlo, importar un solo archivo .js:

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

Entonces Anotar cualquier entradas que desea tener toques con la clase CSS hintTextbox:

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

Más información y ejemplo están disponibles here.

Answer 16

Puede establecer marcador de posición usando placeholder attribute en HTML (browser support). El font-style y el color pueden ser changed with 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 17

Uso jQuery Form Notifier - es uno de los plugins más populares de jQuery y no sufre de los errores de algunas de las otras sugerencias jQuery aquí hacer (por ejemplo, puede estilo libremente la marca de agua, sin preocuparse si se guardará en la base de datos).

jQuery Marca de agua utiliza un único estilo CSS directamente en los elementos de formulario (Me di cuenta de que las propiedades font-size CSS aplicados a la marca de agua también afectaron a los cuadros de texto - no es lo que quería). La ventaja con jQuery Watermark es que puedes 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 recomiendo encarecidamente que no lo haga.

Answer 18

Me gusta la solución de "Knowledge Chikuse" - simple y clara. Sólo tiene que añadir una llamada a desdibujarse cuando la carga de la página está lista que permitirá establecer el estado inicial:

etiqueta HTML simple 'necesaria'

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

Answer 19

es útil.

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

Answer 20

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

por ejemplo

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

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