Kontrola "Pokaż hasło jako tekst"

Question

Mam zwykły formularz logowania składający się z dwóch pól wejściowych, jednego do zalogowania, drugiego do hasła. Obecnie próbuję dodać kontrolkę, która pokaże wprowadzone hasło jako zwykły tekst, aby użytkownik mógł sprawdzić, czy jest literówka.

Problem polega na tym, że przeglądarki (co najmniej Firefox) nie pozwalają na dynamiczną zmianę type atrybutu pól wejściowych, więc nie można po prostu zmienić type="password" do type="text". Innym problemem jest to, że przeglądarki nie pozwalają uzyskać wartości pola hasła, więc nie mogę utworzyć nowego input type="text" i ustawić jego wartość na hasło. Widziałem kilka różnych podejść do tego zadania, w tym this one, ale działają one tylko wtedy, gdy hasło jest wpisane i nie powiedzie się, gdy przeglądarka automatycznie wypełni hasło.

Wszelkie sugestie, aby to zrobić, są mile widziane. Używam jQuery.

Answer 1

można zrobić coś takiego:

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

Answer 2

Jeśli mogę, nie sądzę, że to świetny pomysł, aby pokazać hasło w tekście, z następujących powodów:

1. To nie jest często stosowana, więc będzie to mylące dla użytkownika
2. oznacza to jesteś otwarty na over-the-ramię oglądania hasło

myślę też, jeśli po prostu chcesz, aby pomóc użytkownikom uniknąć literówek, dać im większe szanse przed hasło jest wyłączone. Myślę, że typowe "3", które większość stron implementuje, nie jest tak naprawdę wymagane, sugerowałbym "10", a może "5", jeśli chcesz być naprawdę konserwatywny, jest całkiem do zaakceptowania. Po prostu policz je i pozwól im rozwiązać literówki na własną rękę.

Po prostu moja skromna opinia.

Answer 3

nigdy nie próbowałem to sobie, ale nie można po prostu dostęp do właściwości wartość elementu?

jeśli masz coś jak ...

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

Następnie w JavaScript/jQuery ...

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

$('pw').val() 

Answer 4

Nie ma żadnej możliwości, aby pokazać automatycznie uzupeĹ,nianych hasło ze względów bezpieczeństwa. Każdy może zobaczyć twoje hasło na twoim komputerze dla tej strony, jeśli jest to możliwe.

mieć do czynienia z następującymi dla kompletnego rozwiązania:

• JavaScript nie jest dozwolone - to nie powinien wyświetlać wybrać pole wyboru Hasło
• autouzupełnianie jest włączone - jak pisałem, ty "nie można wyświetlić hasła wypełnionego w ten sposób. Eaighter wyłącza autouzupełnianie lub ukrywa hasło show do momentu ponownego wpisania hasła przez użytkownika.

autouzupełnianie wyłączyć za pomocą tej jQuery

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

Aby dodać pole na bieżąco można wykorzystać następujące jquery-showPassword wtyczki dostępne na 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); 
    } 
}); 

coś takiego znajdzie wejście obszar i zapisz wartość w zmiennej o nazwie showValue. Następnie możesz zamienić element na type = "password", z nowym html gdzie type = "text", a jeśli pole wyboru nie zostanie odznaczone, wartość zostanie zrzucona na pole typu password.

Istnieje problem z tą metodą, ponieważ wartość typu hasła będzie widoczna w kodzie, jednak aby to obejść, zawsze można usunąć atrybut wartości z rodzaju hasła i po prostu zmusić użytkownika do ponownego wpisania. Jeśli możesz żyć z tą aplikacją.

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>