Utilizar Placeholder con jQuery

16/feb/2012 jQuery , , 3 Comentarios
jquery

Seguro que alguno de vosotros ha leido nuestro artículo que cuenta como utilizar un placeholder con HTML5. Esto nos posibilita el poner un texto dentro de un campo de un formulario para orientar al usuario sobre que contenido insertar en dicho campo.

Si bien, uno de los problemas que nos plantea el uso de ciertas propiedades HTML5 es la falta de implementación por parte de ciertos navegadores. Es por ello que la experiencia del usuario de esos navegadores puede ser diferente a la del resto.

Si queremos utilizar placeholders sin HTML5 podemos recurrir a un plugin de jQuery. Mediante el uso de jQuery y este plugin será muy sencillo poder utilizar un placeholders. Además es que la forma en la que utilicemos el placeholders será la misma forma en la que lo utilizábamos en HTML5.

Es decir, si queremos crear un placeholders pondremos lo siguiente:

  1. <label for="texto">Nombre: </label>
  2. <input type="text" id="texto" placeholder="Inserte su nombre" size="40" />

Para poder utilizar el placeholders con jQuery tendremos que hacer varias cosas. La primera será instanciar jQuery e instanciar el plugin de jQuery.

  1. <script src="jquery.js"></script>
  2. <script src="jquery.placeholder.min.js"></script>

Y el siguiente paso inicializar el plugin de jQuery. En este caso el código de incialización es:

  1. $('input, textarea').placeholder();

Si bien, deberemos de esperar a tener cargada la página. Por ello recurriremos al método ready() de jQuery.

  1. <script>
  2. $(document).ready(function(){
  3. $('input, textarea').placeholder();
  4. });
  5. </script>

Con un plugin de jQuery y unas pocas líneas de código tenemos la capacidad de dar soporte a los placeholders de HTML5.

Te puedes descargar el plugin jQuery desde https://github.com/mathiasbynens/jquery-placeholder.

Vídeos sobre jQuery

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*