Menu

Texto en un SearchBox

enero 16, 2011 - jQuery

Introducción

La mayoría de sitio web (incluyendo este) tiene una caja de texto para realizar búsquedas en todo el sitio, esta característica es muy útil a la hora de buscar información precisa y también esas cajas de texto por lo regular presentar siempre un texto en ellos invitándonos a ingresar las palabras a buscar, en este mini articulo les mostrare como hacer que este texto se oculte al escribir algo en el SearchBox y aparezca cuando o no haya nada en él.

Resultado

Como es habitual primero muestro el resultado para luego empezar a trabajar, acá podemos observar como resultado todo después del proceso:

Requerimientos

Para realizar este articulo utilice:

La teoría

Para lograr nuestro propósito utilizaremos jQuery utilizando dos eventos y asociarlos a la caja de texto, ellos son el evento blur y el evento focus.

El evento Blur

El evento blur sucede cuando el control asociado a este evento pierde foco, el evento en jQuery es equivalente al de Javascript, de hecho la documentación oficial de jQuery nos dice que el evento blur dispara su homónimo de Javascrript.

El evento Focus

De manera similar al evento Blur, el evento focus dispara su homónimo y sucede cuando el control en cuestión ‘gana el foco’, si están asociados a programación de escritorio este evento se le suele conocer como OnFocus.

El código

Para el ejemplo he utilizado un caja de texto que no tiene asignado ningún texto y la asociación de los dos eventos mencionados a dicha caja de texto.

Asociando el evento blur

El evento se ejecutara cuando la caja de texto no tenga foco, de hecho cuando la aplicación se lanza por primera vez este método se ejecuta añadiendo la palabra “Buscar…” en nuestro caso, al ejecutarse preguntara si la caja de texto posee algún valor, si no lo posee procederá a asignarle el texto en cuestión.


$("#MainContent_txtSearch").blur(function () {

if (!$(this).val()) {

$(this).val("Buscar...");

}

});

Asociando el evento focus

El evento se ejecutara cuando hagamos clic dentro de la caja de texto, eliminando el texto que este dentro de ella.


$("#MainContent_txtSearch").focus(function () {

if ($(this).val() == "Buscar..."){

$(this).val("");

}

});

Poniendo todo junto

El código completo del ejemplo es este:


$(document).ready(function () {

$("#MainContent_txtSearch").blur(function () {

if (!$(this).val()) {

$(this).val("Buscar...");

}

});

$("#MainContent_txtSearch").focus(function () {

if ($(this).val() == "Buscar..."){

$(this).val("");

}

});

});

Conclusión

Es bueno siempre dar una pista visual al usuario de nuestra página para que se ubique y sepa que es lo que debe de hacer, además de ser una buena practica y dar usabilidad a nuestro sitio.

Happy coding!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *