martes, 12 de julio de 2011

jQuery Placeholder - Actualizado 29/05/12

Placeholder es un atributo que pertenece a HTML5 y se encuentra disponible en los campos de texto y contraseña (input text/password) y las áreas de texto (textarea).

Su función es mostrar un mensaje informativo dentro del elemento cuando éste no tiene contenido.

El problema de HTML5, concretamente del atributo placeholder, es que aún no ha sido implementado en todos los navegadores, es más, en algunos sí ha sido implementado pero con soporte parcial, dejando a un lado los campos de contraseña, por ejemplo.

Por suerte, existen soluciones varias para solventar este problema y una de ellas es la que os expongo a continuación: jQuery Placeholder.

¿Qué es jQuery Placeholder?

Básicamente es un plugin de jQuery quer permite el uso del atributo placeholder en cualquier navegador. Su funcionamiento es sencillo y destacaré sus puntos fuertes:

  • Compatibilidad: soporte para todos los navegadores incluido el ya casi olvidado IE6.
  • Eficaz y ligero: el código no es intrusivo, en su justa medida claro está, utilizando los métodos más idóneos para no interferir con el funcionamiento por defecto del navegador.
  • Usabilidad: además de brindar las usabilidades básicas se incluyen otras como la opción de prescindir de ejecutar este plugin sobre los elementos en caso de que el navegador si soporte nativamente el atributo placeholder (forced), o la posibilidad cambiar el estilo de la etiqueta del placeholder mediante la clase CSS .placeholder (para cambiar la propiedad color desde la clase es necesario utilizar la regla !important).

¿Cómo se utiliza?

$(context).placeholder(selector, config)
La función admite dos argumentos opcionales de entrada sin importar el orden en el que éstos son enviados. El argumento que sea una cadena de texto, será evaluado como selector, de este modo se buscará dentro del contexto dichos elementos que concuerden con el selector.

El otro argumento será evaluado si es un objeto y corresponderá a config, que posee dos propiedades: selector (explicado anteriormente) y forced (explicado en el apartado usabilidad).

Por defecto el marcador forced se encuentra desactivado, evitando así dar soporte al atributo placeholder en caso de que el navegador lo soporte nativamente. El selector por defecto agrupa a todos los campos de texto y contraseña y las áreas de texto. Todas estas opciones las podéis encontrar en el objeto $.placeholder.defaults.

También se encuentra una función de acceso rápido, la cual utiliza directamente el contexto body y se le pueden aplicar las mismas reglas para los argumentos de la función anterior.

$.placeholder(selector, config)
Podéis encontrar varios ejemplos, básicos y complejos, en el repositorio de GitHub del plugin.

Código fuente: https://raw.github.com/yeikos/jquery.placeholder/master/jquery.placeholder.js
Repositorio Github: https://github.com/yeikos/jquery.placeholder

Descarga (versión comprimida)https://raw.github.com/yeikos/jquery.placeholder/master/jquery.placeholder.min.js

No hay comentarios:

Publicar un comentario en la entrada