Tema: Placeholder con modernizr
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 08/11/2012, 20:22
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 7 meses
Puntos: 1567
Respuesta: Placeholder con modernizr
Código HTML: 
Ver original
  1. <!doctype html>
  2. <html lang="es">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>HTML5 Placeholder-modernizr</title>
  6.  
  7. <script src="jquery.js"></script>
  8. <script src="modernizr.js"></script>
  9.  
  10. <script>
  11. $(document).ready(function(){
  12.  
  13. if(!Modernizr.input.placeholder){
  14.  
  15.     $('[placeholder]').focus(function() {
  16.       var input = $(this);
  17.       if (input.val() == input.attr('placeholder')) {
  18.         input.val('');
  19.         input.removeClass('placeholder');
  20.       }
  21.     }).blur(function() {
  22.       var input = $(this);
  23.       if (input.val() == '' || input.val() == input.attr('placeholder')) {
  24.         input.addClass('placeholder');
  25.         input.val(input.attr('placeholder'));
  26.       }
  27.     }).blur();
  28.     $('[placeholder]').parents('form').submit(function() {
  29.       $(this).find('[placeholder]').each(function() {
  30.         var input = $(this);
  31.         if (input.val() == input.attr('placeholder')) {
  32.           input.val('');
  33.         }
  34.       })
  35.     });
  36.  
  37. }
  38.  
  39. });
  40. </script>
  41.  
  42. <style>
  43. .placeholder {
  44.     color: #00486A;
  45. }
  46. -webkit-input-placeholder {
  47.     color:  #00486A;
  48. }
  49. -moz-placeholder {
  50.     color:  #00486A;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <form class="form">
  56.     <p><input type="text" placeholder="Su nombre"></p>
  57.     <p><input type="text" placeholder="Su email"></p>
  58.     <p><input type="text" placeholder="Buscar"></p>
  59.     <p><textarea placeholder="Sus comentarios"></textarea></p>
  60. </form>
  61. </body>
  62. </html>
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.