Come mostrare la password in chiaro nel campo di immissione della password quando l'etichetta viene utilizzata come valore?

Question

Sto usando il codice qui sotto e visto anche in questo violino http://jsfiddle.net/peter/Xt5qu/ per usare le etichette come valori di input. Che cambiamento posso fare in modo che sui campi delle password l'etichetta sia in testo chiaro ma mentre digita è nascosta?

<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

Fiddle: http://jsfiddle.net/WqUZX/

Non c'è modo di farlo. Dire, * è il carattere per "nascondere" la password. Quando gli input sono quel personaggio, lo script non può "ricordarlo". Un altro problema potrebbe verificarsi quando l'utente preme la chiave delete o backspace all'interno della stringa. Incollare una stringa nella casella di input può anche causare problemi.

Naturalmente, è possibile implementare tale funzione utilizzando selectionStart, selectionEnd e un gruppo di listener di eventi chiave. Questo approccio non è impermeabile, tuttavia.

La soluzione più affidabile è quella di sostituire type in text in modalità messa a fuoco e di tornare a password in sfocatura.

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

In alternativa, è possibile utilizzare mouseover per mostrare la password. In questo modo, l'utente può facilmente scegliere se (s) vuole usare la funzione show-password o no.

Answer 2

È possibile utilizzare l'attributo HTML5 placeholder, ma alcuni browser non lo supportano. Come soluzione, ho scritto this JSFiddle, che sostituisce l'immissione della password con un input di testo standard e viceversa, sugli eventi focus e blur.

Codice:

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

Ciò garbo degrada per coloro che hanno disabilitato JavaScript.

Answer 3

Non c'è bisogno di reinventare la ruota se qualcuno ha già fatto:

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

Questo è solo un esempio che ho trovato con una rapida Google. So per certo che uno degli altri blog di sviluppo web ha avuto un esempio ancora più chiaro, ma non riesco a ricordare quale sfortunatamente.

Se si desidera una soluzione homebrew, è sempre possibile vedere come funziona il plug-in di cui sopra e sviluppare la propria soluzione in base ai principi.