Mensaje Nº 47 | 12:50 PM
El atributo placeholder en HTML5


HTML5 ha supuesto bastantes novedades en el desarrollo web. Algunas características ya se están utilizando de forma generalizada y otras muchas poco a poco se irán adoptando a medida que los navegadores las vayan soportando. Una de las nuevas características de HTML5 es el atributo placeholder para los elementos INPUT. El atributo placeholder muestra el texto en un campo hasta que el campo adquiere el foco. En ese momento, se esconde el texto.
Code
<input name="nombre" placeholder="Tu nombre..." type="text">  


Una de las ventajas de utilizar el atributo placeholder es que nuestro código será más semántico. El problema es que este atributo no está soportado por todos los navegadores. Por ejemplo, hasta el momento no es soportado por Internet Explorer. Para que sea cross-browser podemos recurrir a Modernizr y jQuery. Se usa para comprobar si es el navegador es compatible con determinadas características de HTML5 o CSS3 y si no es compatible, ofrecer una alternativa.
Code
if(!Modernizr.input.placeholder){   
     $('[placeholder]').focus(function() {   
       var input = $(this);   
       if (input.val() == input.attr('placeholder')) {   
         input.val('');   
         input.removeClass('placeholder');   
       }   
     }).blur(function() {   
       var input = $(this);   
       if (input.val() == '' || input.val() == input.attr('placeholder')) {   
         input.addClass('placeholder');   
         input.val(input.attr('placeholder'));   
       }   
     }).blur();   
     $('[placeholder]').parents('form').submit(function() {   
       $(this).find('[placeholder]').each(function() {   
         var input = $(this);   
         if (input.val() == input.attr('placeholder')) {   
           input.val('');   
         }   
       })   
     });   
}  


El atributo placeholder funciona con los siguientes tipos de input: text, search, url, tel, email, y password.
Ver ejemplo en funcionamiento » »

Las vírgenes tienen muchas navidades pero ninguna Nochebuena.