feed twitter facebook LinkedIn facebook

jQuery » Utilizar Placeholder con jQuery

febrero 16, 2012 por Víctor Cuervo 3 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery
Foro sobre jQuery
tags: , , ,

Artículos relacionados:

3 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Bitacoras.com
    febrero 16, 2012 #

    Información Bitacoras.com…

    Valora en Bitacoras.com: 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 contenid……

  2. Linea de Codigo » Como utilizar un Polyfill con Modernizr
    febrero 19, 2012 #

    [...] página que tenga un Placeholder y en el caso que no haya soporte del placeholder utilizaremos un plugin de jQuery que nos simule en Placeholder. Ambos artículos ya explicados en Línea de Código.Para utilizar el polyfill de Modernizr tenemos [...]

  3. Semana 13.febrero.2012 | aulambra.com
    febrero 21, 2012 #

    [...] Utilizar Placeholder con jQuery [...]

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*