Lograr compatibilidad absoluta del atributo HTML5 Placeholder

Placeholder es un nuevo atributo HTML5 muy útil, nos permite colocar texto que aparece por defecto en los campos input de un formulario. Este texto por defecto desaparece automáticamente al ingresar al campo, y llegado el caso de que el usuario salga del foco del campo sin ingresar ningún carácter el texto por defecto vuelve a aparecer.

atributo placeholder

El principal problema, y como es de esperarse, es la compatibilidad con navegadores antiguos, para salvar esta diferencia existe una solución que llega a nosotros de la mano de jQuery. Estoy hablando de un plugin llamado justamente como el atribuito, Placeholder, este plugin nos permite lograr una compatibilidad absoluta con todos los navegadores.

Ejemplo de un formulario que utiliza placeholder:

<form id="formualario">
<label for="texto">Nombre: </label>
<input type="text" placeholder="Texto por defecto" size="60" />
</form>

Una vez que activemos el plugin el mismo se encargara de seleccionar y actuar según sea necesario, si el navegador no soporta el atributo placeholder, el plugin va a emular el funcionamiento con tan solo unas líneas de código.

Un consejo, analicen si realmente utilizar el plugin merece la pena por un solo campo, a lo mejor es más fácil simplemente utilizar una función javascript de la vieja escuela. En cambio si los campos abundan en nuestra aplicación el uso de este plugin cobra más sentido.

Web: Placeholder

Categorizado en: