Caption en textbox con JQuery

En muchas ocasiones se nos presenta una situación en la que debemos establecer un valor inicial en un textbox a modo de descripción, y que se ocultará una vez se seleccione el textbox. Esto es a lo que se denomina caption en HTML.

La principal ventaja de los captions es que podemos informar a un usuario del contenido a incluir en un texbox sin necesidad de utilizar un label para ello. Un ejemplo muy típico de este comportamiento lo encontramos en los campos de búsqueda en los cuales podemos leer Search…

Así pues, este comportamiento es un estándar en HTML5, y lo conseguimos fácilmente poniendo en cada textbox del formulario el atributo caption. ¿Pero cómo conseguir esto en versiones anteriores de HTML? La solución…JQuery

Veamos un ejemplo de uso. Supongamos que tenemos un formulario con un textbox, el cual se empleará para buscar dentro de nuestra web, algo como esto:

1: <!-- Formulario de búsqueda -->

2: <form action="/search" method="get">

3:   <!-- Input que mostrará "Buscar..." en HTML5 y vacío en HTML4 -->

4:   <input type="text" name="s" caption="Buscar..." value=""/>

5: </form>

Tal y como se indica en los comentarios, este formulario mostrará un textbox con el contenido “Buscar…” en navegadores compatibles con HTML5 y no mostrará nada en navegadores más antiguos.

Para conseguir nuestro objetivo de mostrar el caption en todos los navegadores (todos los navegadores compatibles con JQuery), seguiremos los siguientes pasos.

Primero, añadir la referencia a JQuery en nuestro header, si no lo hemos añadido ya.

1: <!-- Insertar JQuery desde su CDN -->

2: <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

Segundo, incluir el siguiente código Javascript en nuestra página:

1: <script type="text/javascript">

2: $(document).ready(function(){

3:     // Función a lanzar por cada input de tipo text y

4:     // con el atributo caption

5:     $("input[type=text][caption]").each(function(i, elem){

6:         $(elem).val($(elem).attr("caption")) // Valor inicial

7:                .addClass("label-caption");   // Clase css para personalizar el estilo

8:         

9:         // Función a lanzar por el input cada vez que el usuario

10:         // seleccione el textbox

11:         $(elem).focus(function(){

12:             // El valor actual es igual al caption?

13:             if ($(elem).attr("caption") == $(elem).val()) {

14:                 // Elimina el valor actual y la clase css personalizada

15:                 $(elem).val("").removeClass("label-caption");

16:             }

17:         });

18:         

19:         // Función a lanzar por el input cada vez que el usuario

20:         // deselecciona el textbox

21:         $(elem).blur(function(){

22:             // El valor actual está vacío?

23:             if ("" == $(elem).val()) {

24:                 // Asigna el caption y la clase css personalizada

25:                 $(elem).val($(elem).attr("caption"))

26:                        .addClass("label-caption");

27:             }

28:         });

29:     });

30: });

31: </script>

Por líneas:

• Línea 5: Selecciona todos los input de tipo text del documento con el atributo caption, y por cada uno realiza las siguientes acciones.
• Líneas 6 y 7: Al cargar la página, establece el valor del input al valor del atributo caption, y asigna la clase css label-caption al input para personalización con css.
• Línea 11: Asocia la función indicada al evento focus del input, el cual será lanzado cuando se seleccione el input.
• Líneas 13 y 15: Si en el momento de seleccionar el textbox, éste tiene el mismo valor que el atributo caption, elimina el valor del input y la clase css label-caption.
• Línea 21: Asocia la función indicada al evento blur del input, el cual se lanzará cuando se quite la selección sobre el textbox.
• Líneas 23, 25 y 26: Si en el momento de soltar el foco sobre el textbox, el valor de éste se encuentra vacío, establece el valor del input al valor del atributo caption y añade la clase css label-caption.

Si tienes algún problema para crear este caption, coméntalo.