Controllo "Mostra password come testo"

Question

Ho un modulo di accesso normale costituito da due campi di input, uno per il login, uno per la password. Attualmente sto cercando di aggiungere un controllo che mostrerà la password inserita come testo semplice, in modo che l'utente possa verificarlo per gli errori di battitura.

Il problema è che i browser (almeno Firefox) non consentono il cambio dinamico del type attributo dei campi di input, quindi non posso solo cambiare type="password"-type="text". Un altro problema è che i browser non consentono di ottenere il valore del campo password, quindi non posso creare un nuovo input type="text" e impostare il suo valore su quello della password. Ho visto diversi approcci a questo compito, incluso this one, ma funzionano solo se la password è stata digitata e falliscono quando il browser carica automaticamente la password.

Quindi, qualsiasi suggerimento per farlo è il benvenuto. Sto usando jQuery.

Answer 1

Si può fare qualcosa di simile:

<input type="password" id="password"> 
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password 

Answer 2

Se posso, non penso che sia una grande idea per mostrare la password in formato testo, per i seguenti motivi:

1. Non è comunemente fatto, quindi sarà fonte di confusione per l'utente
2. significa che sono aperti a over-the-spalla visualizzazione della password

penso anche, se si desidera solo per aiutare gli utenti a evitare errori di battitura, dare loro più possibilità prima che la password è disabilitata. Penso che il tipico "3" che la maggior parte dei siti implementa non sia realmente richiesto, suggerirei "10" tentativi, o forse "5", se si vuole essere davvero prudenti, è abbastanza accettabile. Basta contare per loro e lasciare che risolvano errori di battitura da soli.

Solo il mio modesto parere.

Answer 3

non ho mai provato io stesso, ma non puoi semplicemente accedere alla proprietà valore dell'elemento?

se avete qualcosa di simile ...

<input id="pw" name="pw" type="password" /> 

Poi in JavaScript/jQuery ...

var pass = document.getElementById('pw').value; 

$('pw').val() 

Answer 4

Non c'è alcuna possibilità di mostrare la password autofilled per motivi di sicurezza. Chiunque potrebbe vedere la tua password sul tuo computer per questa pagina, se possibile.

bisogna fare i conti con i seguenti per soluzione completa:

• JavaScript non è permesso - allora non si dovrebbe mostrare Seleziona casella Password
• completamento automatico è attivata - come ho già scritto, è non sono in grado di mostrare la password riempita in questo modo. Eaighter disattiva la funzione di completamento automatico o nasconde la password show finché l'utente non re-digita la password.

completamento automatico spegnimento da questo jQuery

$('input').attr('autocomplete', 'off'); 

Per aggiungere casella di controllo al volo è possibile utilizzare i seguenti plug-in jQuery-showPassword disponibile presso http://www.cuptech.eu/jquery-plugins/

Answer 5

$('.show-password').change(function() { 
    if ($("#form-fields_show-password").attr('checked')) { 
    var showValue = $('#form-fields_password').val(); 
    var showPassword = $('<input type="text" size="50" required="required" name="form- fields[password]" id="form-fields_password" class="password required" value="'+showValue+'">'); 
    $('#form-fields_password').replaceWith(showPassword); 
    } else { 
    var hideValue = $('#form-fields_password').val(); 
    var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">'); 
    $('#form-fields_password').replaceWith(hidePassword); 
    } 
}); 

Qualcosa del genere troveranno l'ingresso area e memorizzare il valore in una variabile denominata showValue. Quindi è possibile sostituire l'elemento con type = "password", con new html dove type = "text" e se la casella di controllo è deselezionata il valore verrà inserito nel campo del tipo di password.

C'è un problema con questo metodo in quanto il valore del tipo di password sarà visibile nel codice, tuttavia per aggirare questo è sempre possibile rimuovere l'attributo value dal tipo di password e forzare semplicemente l'utente a ridigitare. Se puoi vivere con quello nella tua applicazione.

Answer 6

function change(){ 
id.type="password"; 
} 


<input type="text" value="123456" id="change"> 
<button onclick="pass()">Change to pass</button> 
<button onclick="text()">Change to text</button> 
<script>function pass(){document.getElementById('change').type="password";} function text(){document.getElementById('change').type="text"; } </script> 

Answer 7

Password: <input type="password" value="" id="myInput"><br><br> 
<input type="checkbox" onclick="myFunction()">Show Password 

<script> 
function myFunction() { 
    var x = document.getElementById("myInput"); 
    if (x.type === "password") { 
     x.type = "text"; 
    } else { 
     x.type = "password"; 
    } 
} 
</script>