martes, 6 de diciembre de 2011

Placeholder HTML5 compatible con jQuery

El nuevo atributo de HTML5 Placehoder permite poner un texto por defecto en los input html, pero claro esto es sólo válido para los navegadores que soportan HTML5. Lo mismo que nos ofrece el atributo placeholder lo podemos hacer mediante jquery.


A continuación un ejemplo de placeholder con HTML5:
<form id="formualario">
<label for="texto">Nombre: </label>
<input type="text" placeholder="Texto por defecto" size="60" />
</form>
El ejemplo en funcionamiento con HTML5
Como decia, esto mismo lo podemos hacer con jQuery. Con el plugin que os dejo, jquery.da.placeholder.js, lograremos este mismo efecto. El plugin acepta dos parámetros, el primero será el texto por defecto a mostrar y como segundo parámetro se le podrá pasar los estilos css a aplicar al input
<script src="jquery.da.placeholder.js">
</script>
  <script>
    $(document).ready(function(){ 
      $("#da_placeholder").daplaceholder({
        initValue: 'Texto por defecto',
        cssElement: { color: "#660000",background: "#ffcc00"}});   
   }) 
</script>
<form id="formualario">
<label for="texto">Nombre: </label>
<input type="text" id="da_placeholder" size="60" />
</form>
El ejemplo en funcionamiento con jquery.da.placeholder.js

No hay comentarios :

Publicar un comentario