¿Cómo mostrar la contraseña en texto claro en el campo de ingreso de contraseña cuando la etiqueta se usa como valor?

Question

Estoy usando el código a continuación y también visto en este violín http://jsfiddle.net/peter/Xt5qu/ para usar etiquetas como valores de entrada. ¿Qué cambio puedo hacer para que en los campos de contraseña la etiqueta esté en texto claro pero a medida que escriben está oculta?

<form id="new_account_form" method="post" action="#" class="login-form"> 
<ul> 
<li> 
      <label for="user_email">Email address</label> 
      <input id="user_email" name="user_email" required="" class="validate[required,custom[email]] clearOnFocus login-itext" type="text"> 
      </li> 
      <li> 
      <label for="user_password">Password</label> 
      <input id="user_password" name="user_password" required="" class="validate[required,minSize[6]] clearOnFocus login-itext" type="password"> 
</li> 
<li> 

    <input name="Submit" type="submit" class="login-ibutton" value="Sign in"></li> 
</ul> 
</form> 

<script script type="text/javascript"> 
this.label2value = function(){ 

    // CSS class names 
    // put any class name you want 
    // define this in external css (example provided) 
    var inactive = "inactive"; 
    var active = "active"; 
    var focused = "focused"; 

    // function 
    $("label").each(function(){  
     obj = document.getElementById($(this).attr("for")); 
     if(($(obj).attr("type") == "text", "password") || (obj.tagName.toLowerCase() == "textarea")){   
      $(obj).addClass(inactive);   
      var text = $(this).text(); 
      $(this).css("display","none");   
      $(obj).val(text); 
      $(obj).focus(function(){  
       $(this).addClass(focused); 
       $(this).removeClass(inactive); 
       $(this).removeClass(active);         
       if($(this).val() == text) $(this).val(""); 
      }); 
      $(obj).blur(function(){ 
       $(this).removeClass(focused);              
       if($(this).val() == "") { 
        $(this).val(text); 
        $(this).addClass(inactive); 
       } else { 
        $(this).addClass(active);  
       };    
      });    
     }; 
    });  
}; 
// on load 
$(document).ready(function(){ 
    label2value(); 
}); 
</script> 

Answer 1

violín: http://jsfiddle.net/WqUZX/

No hay manera de hacer eso. Diga, * es el caracter para "esconder" la contraseña. Cuando las entradas de ese personaje, el guión no puede "recordarlo". Otro problema podría ocurrir cuando el usuario presiona la tecla delete o backspace dentro de la cadena. Pegar una cadena en el cuadro de entrada también puede causar problemas.

Por supuesto, puede implementar una función de este tipo usando selectionStart, selectionEnd y un grupo de oyentes de eventos clave. Sin embargo, este enfoque no es a prueba de agua.

La solución confiable más cercana es cambiar el type a text en el enfoque y volver a password en el desenfoque.

$("#user_password").focus(function(){ 
    this.type = "text"; 
}).blur(function(){ 
    this.type = "password"; 
}) 

Como alternativa, puede utilizar mouseover para mostrar la contraseña. De esta forma, el usuario puede elegir fácilmente si desea usar la función de mostrar contraseña o no.

Answer 2

Puede usar el atributo HTML5 placeholder, pero bastantes navegadores no son compatibles. Como solución, hay this JSFiddle escribí, que sustituye a la introducción de la contraseña con una entrada de texto estándar, y viceversa, en los focus y blur eventos.

Código:

$(document).ready(function() { 
    $("input[name='password']").prop("type", "text").val("Password"); 
}); 

$("input[name='password']").focus(function() { 
    if($(this).val() === "Password") 
    { 
     $(this).prop("type", "password").val(""); 
    } 
}); 

$("input[name='password']").blur(function() { 
    if(!$(this).val().length) 
    { 
     $(this).prop("type", "text").val("Password"); 
    } 
}); 

Esto gracia degradar para aquellos que tienen JavaScript desactivado.

Answer 3

No hay necesidad de reinventar la rueda si alguien ya lo ha hecho:

http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/

Eso es sólo un ejemplo que encontré con una búsqueda rápida en Google. Sé con certeza que uno de los otros blogs de desarrollo web tenía un ejemplo aún más claro, pero no recuerdo cuál desafortunadamente.

Si desea homebrew una solución, siempre se puede ver cómo el plugin por encima de lo está haciendo, y desarrollar su propia solución basada en los principios.