2012-04-26 21 views
15

Sé que Internet Explorer no admite el atributo de marcador de posición para las etiquetas de entrada, pero seguramente en 2012 debe haber otra solución para IE.Atributo marcador de posición en etiquetas de entrada para IE?

+1

https://www.google.com/search?q=placeholder+polyfill – SLaks

+1

Buena pregunta. Antes de saltar para responder, veamos la situación de * compatibilidad nativa * en otros navegadores. Probado en IE10 RP, el selector -ms-input-placeholder {} psuedo admite las 13 propiedades [enumeradas en esta página ** test **] (http://newilk.com/testing/Placeholder_styling). Chrome no admite el relleno en el marcador de posición mientras que FF no llega a la altura de la línea. La versión más nueva de Safari admite 5 de 13 propiedades (mientras que 10 propiedades fueron compatibles en su versión anterior). A partir de Opera 11, el estilo del marcador de posición se descarta. –

Respuesta

14

Escribí un plugin de jQuery hace un tiempo que agregará soporte de marcador de posición a cualquier navegador que no lo admita.

Placeholder Text in IE

+0

Gracias por la respuesta. Probé tu código pero parece que no puedo hacerlo funcionar. Hice una página html de un trazador de líneas muy simple para probar en IE 9. aquí está mi código: – DextrousDave

+0

\t \t < script src = "javascript/jquery-1.7.2.min.js"> \t \t \t \t \t \t

\t \t \t – DextrousDave

+0

alguna irregularidad con lo que hice. Realmente probé todo tipo de cosas y mis enlaces están bien ... – DextrousDave

3

En realidad, IE does support el atributo de marcador de posición en 2012 (Versión 10). Asocie esto con a polyfill para navegadores antiguos, y debe tener una solución completa para su problema.

+6

En lugar de usar un relleno sintético, puede combinarlo con el hecho de que los marcadores de posición no reemplazan a las etiquetas (son sugerencias y ejemplos), por lo que no son esenciales y no puede preocuparse por los navegadores que no los admiten. – Quentin

+0

+1 @Quentin Gran punto. – Sampson

+1

[html5please.com] (http://html5please.com/) es otro buen recurso para este tipo de información. En marcadores de posición: [http://html5please.com/#placeholder](http://html5please.com/#placeholder) –

0

Sí, hay una solución muy fácil para IE8 e IE9 porque en las versiones más redondas de IE ya funciona. (IE10, EI11, etc)

Esta es la solución que encontré:

1. Detectar la versión de Internet Explorer

<!--[if lt IE 10]>  
    <script type="text/javascript">var ie = 9;</script>  
<![endif]-->  
<!--[if lt IE 9]>     
    <script type="text/javascript">var ie = 8;</script>   
<![endif]--> 

2. Fijar el marcador de posición

if (typeof ie == 'undefined') var ie = 10; 
if (ie == 8 || ie == 9){ 

    $("input[placeholder]").each(function() { 
     this.value = $(this).attr('placeholder'); 
    });   

    $("input[placeholder]").focus(function() 
     if (this.value == $(this).attr('placeholder')) this.value = ''; 
    }).blur(function() { 
     if (this.value == '') 
      this.value = $(this).attr('placeholder'); 
    }); 
} 
Cuestiones relacionadas