"Contraseña" se muestra como "********" en IE para marcador de posición

Question

Uso el marcador de posición HTLM5 y agregué modernizr.js para que funcione en IE. El segmento de código es:

<input type="password" placeholder="Password"> 

function hasPlaceholderSupport() { 
    var input = document.createElement('input'); 
    return ('placeholder' in input); 
} 


$(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(''); 
       } 
      }) 
     }); 

    } 
}); 

Se está trabajando bien para otro navegador y quiero mostrar el texto de input type password en IE pero en cambio, pone el marcador de posición en los caracteres de máscara. ¿Cómo se puede aplicar el texto "Password"?

Answer 1

El problema es que la secuencia de comandos de respaldo del marcador de posición usa el valor del campo para mostrar el marcador de posición.

Los campos de contraseña, por supuesto, ocultan su valor, por lo que esta técnica fallará en los campos de contraseña exactamente de la manera descrita.

Lo que necesita es un script de marcador de posición que funcione escribiendo el marcador de posición en un elemento adicional que se superpone en la parte superior del campo (o detrás si el fondo del campo es transparente). El script puede alterar este elemento, en lugar de alterar el valor del campo.

Hay toda una carga de scripts disponibles que hacen exactamente esto - this one, for example (pero hay muchos otros también).

La otra opción es cambiar dinámicamente el tipo de campo de password a text y viceversa siempre que se active el marcador de posición. Esta podría ser una ganancia más rápida para encajar en su código actual, pero recomendaría utilizar la otra técnica en su lugar a largo plazo.

Espero que ayude.

Answer 2

Intente utilizar este código ... Espero que lo ayude.

/* <![CDATA[ */ 
$(function() { 
    var input = document.createElement("input"); 
    if (('placeholder' in input) == false) { 
    $('[placeholder]').focus(function() { 
     var i = $(this); 
     if (i.val() == i.attr('placeholder')) { 
     i.val('').removeClass('placeholder'); 
     if (i.hasClass('password')) { 
      i.removeClass('password'); 
      this.type = 'password'; 
     } 
     } 
    }).blur(function() { 
     var i = $(this); 
     if (i.val() == '' || i.val() == i.attr('placeholder')) { 
     if (this.type == 'password') { 
      i.addClass('password'); 
      this.type = 'text'; 
     } 
     i.addClass('placeholder').val(i.attr('placeholder')); 
     } 
    }).blur().parents('form').submit(function() { 
     $(this).find('[placeholder]').each(function() { 
     var i = $(this); 
     if (i.val() == i.attr('placeholder')) 
      i.val(''); 
     }) 
    }); 
    } 
}); 
/* ]]> */