jQuery Hint, texto de ayuda en los campos de tu formulario

Escrito por y leído 1,704 veces. Ver comentarios

jQuery Hint, texto de ayuda en los campos de tu formulario

14JUNIO/2012

jQuery Text box hint es un plugin que se ocupará de mostrar y esconder contenido automáticamente en los campos de nuestro formulario de contacto.

Muchas veces habrás visto que al rellenar un formulario (creo que Twitter lo tiene), ya te aparece escrito algún texto en los campos de tipo input o textarea y al hacer click sobre ellos ese contenido desaparece automáticamente, volviendo a aparecer si haces un click fuera de dicho campo.

Pues bien, aunque este plugin es un poco antiguo, a día de hoy lo utilizo mucho en mis proyectos porque es una ayuda al usuario, para decirle en un lugar no intrusivo qué queremos que escriba en cada campo de nuestro formulario.

Lo que está genial, es que se complementa perfectamente con otros plugins, como validate ya que el contenido que mostrará el campo saldrá del atributo title y no del value de dicho campo, por lo tanto, a efectos de hacer una validación, el campo seguirá estando vacío.

Otras opciones.
El plugin agregará automáticamente la clase ´blur´ a nuestros campos del formulario, por lo que podremos perfectamente personalizar su apariencia, por ejemplo, con un gris claro en lugar del color habitual con el que defines el contenido de tus campos. Con esto lograrás que el usuario diferencie bien qué campo tiene rellenado y cuál está mostrando aún el texto de ayuda.

No hace falta más.
Su autor nos deja una demo funcional para que lo veas en acción y, si te lo quieres descargar, sigue este enlace.

Código 1 - HTML
<form action="">
    <div><label for="search">Buscar:</label>
    <input type="text" name="seach" value="" id="search" title="Este es el texto de ayuda!" />
    <input type="submit" value="Buscar" />
    </div>
</form>
Código 2 - JAVASCRIPT
$(function(){ 
// lo aplica a todos los campos de tipo input que tengan un título
$('input[title!=""]').hint();
});
Código 3 - CSS
.blur{color:#666}

Acerca del Autor:

Diseñador web freelance en Coruña Galicia | Martin Iglesias

Martín Iglesias, diseñador web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 15 años de experiencia en el desarrollo de páginas web profesionales.

Si te ha gustado este artículo, por favor, ayúdame a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Artículos relacionados:

Este artículo ha salido en un total de 40 búsquedas desde Google en sus 343 días de vida y ha sido visto 1,704 veces.