Atributo marcador de posición no admitido en IE. ¿Alguna sugerencia?

¿Qué utilizan todos para admitir los atributos de marcador de posición en los navegadores?Atributo marcador de posición no admitido en IE. ¿Alguna sugerencia?

Actualmente, estoy usando:

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

también han tratado este plugin en vano:

https://github.com/danbentley/placeholder

pero no parecen funcionar con IE ... Más específicamente IE 8. ¿Alguna otra sugerencia/alternativa?

¿Debería olvidarme del atributo de marcador de posición por ahora?

Fuente

2011-10-14 Christian Fazzini

Si el soporte para Internet Explorer 8 es fundamental entonces, sí, usted debe olvidarse de características que no son compatibles. Si los marcadores de posición serían agradables para sus usuarios pero no son fundamentales, utilícelos y no se preocupe por IE8. – robertc

Si son fundamentales, entonces los está utilizando mal. Una pista nunca debería ser un requisito esencial para entender una entrada. – Quentin

¿Has podido encontrar una solución para esto? – learning

Tienes razón que IE8 no soporta el atributo placeholder. placeholder es parte de la especificación de HTML5, e IE8 se lanzó mucho antes de que se pensara en HTML5.

La mejor manera de tratarlo sin problemas es usar una herramienta como Modernizr para detectar si el navegador tiene soporte para la característica de marcador de posición y ejecutar un script de polyfill JS si no es compatible.

if(!Modernizr.input.placeholder) { 
    //insert placeholder polyfill script here. 
}

Existen numerosas secuencias de comandos de relleno de poliuretano para su descarga. Elija uno que haga uso del atributo placeholder para que solo necesite definir la cadena de marcador de posición en un lugar para todos los navegadores. Aquí hay uno que podría intentar: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Espero que ayude.

Fuente

2011-10-14 13:22:03 Spudley

El problema aquí es que incluso los scripts de polyfill JS no parecen funcionar con IE –

+1 para la referencia del enlace. –

Otro buen recurso, tiene una lista de enlaces en la sección 'marcador de posición': https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills –

Esto es lo que utilicé en uno de mis proyectos. Lo único es que solo necesitaba un marcador de posición en un elemento, por lo que podría no funcionar para su situación de inmediato. Pero sólo para hacerse una idea de cómo es simple el código es:

(function(){ 
    var nameInput = document.getElementById('your-id-here'); 
    var placeHolderSupport = ("placeholder" in document.createElement("input")); 
    if(!placeHolderSupport) 
    { 
     //show hint in gray 
     var placeholder = nameInput.getAttribute('placeholder'); 
     nameInput.onfocus = function(){ if(this.value==placeholder){this.value='';this.className='';} }; 
     nameInput.onblur = function(){ if(this.value==''){this.value=placeholder;this.className='placeholder';} }; 
     nameInput.onblur(); 
    } 
})()

Fuente

2011-10-14 12:55:33 Gerben

De hecho, ninguno de los IE a partir del 19 de octubre de 2011 admite el atributo marcador de posición. Lo probé en 7, 8 y 9 y ninguno parece reconocerlo. Podrías pensar que ie9, viendo cómo se supone que debe soportar css3 y html5, habría solucionado esto, pero no parece ser así.

Como un simple solución que no es bonita, pero hace el trabajo puede utilizar algo de JavaScript así:

<input type="text" value="Enter ZIP" 
    onfocus="if(this.value == 'Enter ZIP'){this.value = '';}" />

Fuente

2011-10-19 17:02:08 weexpectedTHIS

Eso no devolverá el valor 'onblur' – gdoron

Hay bastantes guiones polyfill para el atributo de marcador de posición. Aquí está one that seems to work well.

Sólo recuerde llamar $('input, textarea').placeholder(); en el código JS, y, posiblemente, añadir una regla CSS, por ejemplo. .placeholder { color: #aaa }.

Fuente

2011-11-06 18:46:07 tuomassalo

Aquí está el código directamente de mi proyecto que funciona de forma nativa en cromo y usa el relleno en IE8 ... hay una alerta aquí para las pruebas que muestran cuándo se está llamando al relleno. Necesita modernizr cargado como requisito previo para usar este código, pero un script simple incluido en su sección <head> lo hará.

<script type="text/javascript"> 
    $('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(''); 
        } 
       }) 
      }); 

      alert("no place holders"); 
     } 
    }); 
</script>

Fuente

2012-12-20 19:49:30

Esto traerá problemas si usaremos valores colocados en javascript. Obtendremos texto en lugar de las cadenas vacías reales que se suponía que debían ser. –

lo que hice en mi proyecto para evitar que esto ocurriera en el evento de envío si el valor del texto era igual al valor del marcador de posición, establecí el valor en nulo. Todavía es un poco hacky, pero desafortunadamente el soporte de los navegadores más antiguos tiende a ser así en ocasiones. –

Con todas las otras respuestas y ejemplos que he estado viendo, encontré algunos problemas. Escribí mi propia solución para resolver estos problemas y decidí publicarla aquí.Las 2 cosas mi código manejará correctamente que las otras soluciones parecen tener problemas con son:

Si realmente sucede que desee introducir el texto que figura en el marcador de posición como el valor, el código no asumirá que este es el marcador de posición y descarta tu entrada.
Si presiona el botón Actualizar en IE, no se autopoblarán los campos con los valores del marcador de posición.

Incluir Modernizr y jQuery como sigue:

<script type="text/javascript" src="jquery-1.9.1.js"></script> 
<script type="text/javascript" src="modernizr-2.6.2.js"></script>

Añadir un poco de CSS, tales como:

<style type="text/css" media="all"> 
.placeholder { 
    color: #aaa; 
} 
</style>

A continuación, el código principal que necesita es:

<script type="text/javascript"> 

$(document).ready(function() { 

    // Only do anything if the browser does not support placeholders 
    if (!Modernizr.input.placeholder) { 

     // Format all elements with the placeholder attribute and insert it as a value 
     $('[placeholder]').each(function() { 
      if ($(this).val() == '') { 
       $(this).val($(this).attr('placeholder')); 
       $(this).addClass('placeholder'); 
      } 
      $(this).focus(function() { 
       if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) { 
        $(this).val(''); 
        $(this).removeClass('placeholder'); 
       } 
      }).blur(function() { 
       if($(this).val() == '') { 
        $(this).val($(this).attr('placeholder')); 
        $(this).addClass('placeholder'); 
       } 
      }); 
     }); 

     // Clean up any placeholders if the form gets submitted 
     $('[placeholder]').parents('form').submit(function() { 
      $(this).find('[placeholder]').each(function() { 
       if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) { 
        $(this).val(''); 
       } 
      }); 
     }); 

     // Clean up any placeholders if the page is refreshed 
     window.onbeforeunload = function() { 
      $('[placeholder]').each(function() { 
       if ($(this).val() == $(this).attr('placeholder') && $(this).hasClass('placeholder')) { 
        $(this).val(''); 
       } 
      }); 
     }; 
    } 
}); 

</script>

Fuente

2013-02-25 11:10:30 neelsg

-1

Luché con esto yo mismo. Encontré un trabajo alrededor. Funciona bastante bien en mi IE8 y en Chrome. Me desarrollado una obra fresca alrededor y se lo expliquen a continuación ...

HTML

<input type="text" class="input-remover badinput" value="Business Name"> 
<input type="text" class="input-remover badinput" value="Business Address 1"> 
<input type="text" class="input-remover badinput" value="Business Address 2"> 
<input type="text" class="input-remover badinput" value="City">

se verán afectados Todos los campos de entrada con la clase de entrada-removedor. Simplemente coloque las palabras que desea utilizar como marcador de posición dentro del valor. La clase badinput se usa para evitar que alguien envíe campos de entrada con los valores predeterminados.

jQuery

var textval 

$(".input-remover").click(function(){ 
textval = this.value; 
$(this).addClass("currentspot"); 

if ($(this).hasClass("placeholder")) 
{ 

}else{ 

$(this).val(""); 

} 

}); 


$("input").keypress(function(){ 
$(".currentspot").removeClass("badinput"); 
$(".currentspot").addClass("placeholder"); 

}); 


$("input").blur(function(){ 

if ($(this).hasClass("placeholder")) 
{ 


$(".currentspot").removeClass("currentspot"); 

}else{ 

$(".currentspot").val(textval); 
$(".currentspot").removeClass("currentspot"); 

} 

});

Honestamente, Id explicar esta parte, pero realmente creo ITD ser más fácil de decir, no te editarlo. Es bueno como es. Sí, probablemente podría modificarlo, pero lo evitaría a menos que sepa lo que está haciendo para evitar que actúe mal.

Y también he incluido un JsFiddle que lo muestra funcionar. Espero que ayude. Considero que la mayoría de estas cosas me gustan como una plataforma. pero al menos lo hace desde entonces. ¡Buena suerte!

violín Here

Fuente

2013-10-17 20:26:08

Atributo marcador de posición no admitido en IE. ¿Alguna sugerencia?

Respuesta

Cuestiones relacionadas