Placeholder con modernizr

klueko · #1 (**permalink**) 08/11/2012, 10:23

Saludos,

mi consulta es sobre un formulario de contacto donde las distintas versiones de internet explorer no reconocen “placeholder”, con lo que “name, email, subject y message” no aparecen en el formulario, cosa que si ocurre en Mozilla y Chrome. ¿Qué código debo pegar y donde para solucionarlo usando modernizr?.
Si alguien me da una mano se lo agradecería.

El código se puede ver en Pastebin:

http://pastebin.com/yp63YG5f

Gracias.

hackjose · #2 (**permalink**) 08/11/2012, 10:27

Modernizr solo detecta las capacidades del navegador y dependiendo de estas tu decides que usar.

La unica version de explorer que soporta ese atributo es la version 10.

Para mas info checa esta pagina http://caniuse.com/#search=input

emprear · #3 (**permalink**) 08/11/2012, 20:22

Código HTML:

Ver original<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>HTML5 Placeholder-modernizr</title>
 
<script src="jquery.js"></script>
<script src="modernizr.js"></script>
 
<script>
$(document).ready(function(){
 
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('');
        }
      })
    });
 
}
 
});
</script>
 
<style>
.placeholder {
    color: #00486A;
}
-webkit-input-placeholder {
    color:  #00486A;
}
-moz-placeholder {
    color:  #00486A;
}
</style>
</head>
<body>
<form class="form">
    <p><input type="text" placeholder="Su nombre"></p>
    <p><input type="text" placeholder="Su email"></p>
    <p><input type="text" placeholder="Buscar"></p>
    <p><textarea placeholder="Sus comentarios"></textarea></p>
</form>
</body>
</html>