Mostrando el texto del marcador de posición para el campo de contraseña en IE

Question

Sé que hay un montón de preguntas, pero estoy tratando de perfeccionar el mío.

Mi código actual funciona muy bien y hace lo que se supone que debe hacer. El problema es que cuando voy a colocar el marcador de posición de "contraseña", coloca el marcador de posición en los caracteres de enmascaramiento. ¿Alguna idea sobre cómo evitar eso?

$(function() { 
if(!$.support.placeholder) { 
     var active = document.activeElement; 
    $(':text').focus(function() { 
     if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) { 
      $(this).val('').removeClass('hasPlaceholder'); 
     } 
    }).blur(function() { 
     if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) { 
      $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder'); 
     } 
    }); 
    $(':text').blur(); 
    $(active).focus(); 
    $('form').submit(function() { 
     $(this).find('.hasPlaceholder').each(function() { $(this).val(''); }); 
    }); 

    var active = document.activeElement; 
    $(':password').focus(function() { 
     if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) { 
      $(this).val('').removeClass('hasPlaceholder'); 
     } 
    }).blur(function() { 
     if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) { 
      $(this).val($(this).attr('placeholder')).addClass('hasPlaceholder'); 
     } 
    }); 
    $(':password').blur(); 
    $(active).focus(); 
    $('form').submit(function() { 
     $(this).find('.hasPlaceholder').each(function() { $(this).val(''); }); 
    }); 
} 
    }); 

Mi campo para el pase:

<div id="loginform_pass"><input class="login" tabindex="2" type="password" placeholder="Password" name="password" maxlength="30"></div> 

Answer 1

Si estoy entendiendo este derecho, desea que el campo de decir "contraseña" cuando nada se ha escrito en ella; sin embargo, "Contraseña" se muestra como "********".

Una solución decente a eso (que también degrada con gracia, dependiendo de cómo se codificarlo) es:

1. poner una etiqueta antes de la introducción de la contraseña. Establezca el texto de LABEL en "Contraseña" y configure su atributo for para que apunte a la ID de ENTRADA, de modo que la ENTRADA se enfoque cuando se hace clic en la ETIQUETA.
2. Utilice CSS para colocar la ETIQUETA en la parte superior de la ENTRADA, de modo que se superpongan y parezca que la "Contraseña" está dentro de la ENTRADA.
3. Haga que la ETIQUETA solo esté visible cuando se le aplica alguna clase de CSS (por ejemplo, .showMe).
4. Uso JavaScript para ocultar la ETIQUETA
   • ... si el valor de la entrada es una cadena vacía
   • ... o si el usuario ha seleccionado (centrado) la entrada.

Answer 2

Podría simplemente intercambiar el campo de texto original con un campo de contraseña?

$('#pass').focus(
    function(){ 
     var pass = $('<input id="pass" type="password">'); 
     $(this).replaceWith(pass); 
     pass.focus(); 
    } 
); 

<input id="pass" type="text" value="Passowrd"> 

http://jsfiddle.net/UrNFV/

Answer 3

me encontré con este problema con IE antes. Aquí está mi solución :)

http://jsfiddle.net/mNchn/

Answer 4

También puede probar esto ... detecta que el navegador no tiene soporte para marcador de posición y funciona para todos los tipos de entrada

function FauxPlaceholder() { 
     if(!ElementSupportAttribute('input','placeholder')) { 
      $("input[placeholder]").each(function() { 
       var $input = $(this); 
       $input.after('<input id="'+$input.attr('id')+'-faux" style="display:none;" type="text" value="' + $input.attr('placeholder') + '" />'); 
       var $faux = $('#'+$input.attr('id')+'-faux'); 

       $faux.show().attr('class', $input.attr('class')).attr('style', $input.attr('style')); 
       $input.hide(); 

       $faux.focus(function() { 
        $faux.hide(); 
        $input.show().focus(); 
       }); 

       $input.blur(function() { 
        if($input.val() === '') { 
         $input.hide(); 
         $faux.show(); 
        } 
       }); 
      }); 
     } 
    } 
    function ElementSupportAttribute(elm, attr) { 
     var test = document.createElement(elm); 
     return attr in test; 
    } 

Answer 5

dependiendo de si no desea poder cambiar dinámicamente el texto dentro del marcador de posición, su solución más simple podría ser que el texto de marcador de posición sea una imagen.

input { 
    background: url(_img/placeholder.png) 50% 5px no-repeat; 
    . 
    . 
    . 
} 
input:focus { 
    background: none; 
} 

Es evidente que hay muchas maneras distintas de utilizar este método, y usted tendrá que usar algún tipo de una solución para conseguir :focus para trabajar en los navegadores que no soportan.

Answer 6

que tenían el mismo problema, así que escribió un pequeño plug-in

$.fn.passLabel = function(){ 
var 
T = $(this), 
P = T.find('input[type=password]'), 
V = pass.val(); 

P.attr('type','text'); 
P.focus(function(){ 
if(V == "") 
P.attr('type','password'); 
}); 
} 

ahora que acaba de llamar para el de por lo que encontrará todos los campos de entrada con la contraseña atributo.

por ejemplo.

$('form').passLabel(); 

Answer 7

Aquí mi plugin:

if(jQuery.support.placeholder==false){ 
    // No default treatment 
    $('[placeholder]').focus(function(){ 
     if($(this).val()==$(this).attr('placeholder')) 
      $(this).val(''); 
     if($(this).data('type')=='password') 
      $(this).get(0).type='password'; 
    }); 
    $('[placeholder]').blur(function(){ 
     if($(this).val()==''){ 
      if($(this).attr('type')=='password'){ 
       $(this).data('type','password').get(0).type='text'; 
      } 
      $(this).val($(this).attr('placeholder')); 
     } 
    }).blur(); 
} 

Answer 8

Un poco tarde, sin embargo lo mismo aquí, yo estaba trabajando en el tema demasiado IE9 doesnot mostrar el marcador de posición contraseña como texto, en casi todas las respuestas en Internet algunos sugiérele cambiar el tipo, pero si lo hace, tendrá otro problema en la página de inicio de sesión, como cuando verá con doble clic en el campo de contraseña, ya que su tipo cambió a texto de contraseña, por cierto, funciona con prop. p.ej. prop ("tipo", "contraseña") si desea cambiar el tipo de un elemento.

Por otro lado, creo que la mayoría de las respuestas provienen de una sola solución, como el enfoque y las acciones de desenfoque de los elementos. pero cuando aplique este complemento, también se realizarán otros campos de texto, no existe una solución específica o puedo decir generlizada, todavía tengo un problema menor en la página de inicio de sesión con el campo de contraseña, pero está mostrando el texto correctamente. de todas formas. aquí es cómo configuré, copié, cambié y/u otras torres heredadas aquí.

(function($) { 
    $.fn.placeholder = function() { 
     $('input[placeholder], textarea[placeholder]').focus(function() { 
      var input = $(this); 
      if (input.val() === input.attr('placeholder')) { 
       if (input.prop("id") === "password") { 
        input.prop("type", "password"); 
       } 
       input.val(''); 
       input.removeClass('placeholder'); 
      } 
     }).blur(function() { 
      var input = $(this); 
      if (input.val() === '' || input.val() === input.attr('placeholder')) { 
       input.addClass('placeholder'); 
       if (input.prop("type") === "password") { 
        input.prop("type", "text"); 
       } 
       input.val(input.attr('placeholder')); 
      } 
     }).blur().parents('form').submit(function() { 
      $(this).find('input[placeholder], textarea[placeholder]').each(function() { 
       var input = $(this); 
       if (input.val() === input.attr('placeholder')) { 
        input.val(''); 
       } 
      }); 
     }); 
    }; 
})(jQuery); 

siendo un prolem activa ...: D