Управление «Показать пароль как текст»

Question

У меня есть обычная форма входа, состоящая из двух полей ввода: одна для входа, одна для пароля. В настоящее время я пытаюсь добавить элемент управления, который будет отображать введенный пароль в виде обычного текста, поэтому пользователь может проверить его на наличие опечаток.

Проблема заключается в том, что браузеры (по крайней мере, Firefox) не позволяют динамическое изменение type атрибута входных полей, так что я не могу просто изменить type="password" к type="text". Другая проблема заключается в том, что браузеры не позволяют получить значение поля пароля, поэтому я не могу создать новый input type="text" и установить его значение для пароля. Я видел несколько разных подходов к этой задаче, в том числе this one, но они работают только в том случае, если пароль вводится и не выполняется, когда браузер автоматически заполняет пароль.

Итак, любые предложения для этого приветствуются. Я использую jQuery.

Answer 1

Вы можете сделать что-то вроде этого:

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

Answer 2

Если я могу, я не думаю, что это отличная идея, чтобы показать пароль в тексте, по следующим причинам:

1. Это обычно не делается, так что это будет ввести в заблуждение пользователя
2. это означает, что вы открыты для более-плеча просмотра пароля

Я также думаю, если вы просто хотите, чтобы помочь пользователям избежать опечаток, дать им больше шансов, прежде чем пароль будет отключен. Я думаю, что типичный «3», который реализуется большинством сайтов, на самом деле не требуется, я бы предположил, что попытки «10» или «5», если вы хотите быть действительно консервативными, вполне приемлемы. Просто посчитайте это для них и дайте им разрешить опечатки самостоятельно.

Просто мое скромное мнение.

Answer 3

Я никогда не пробовал это сам, но вы не можете просто получить доступ к свойству значение элемента?

если у вас есть что-то вроде ...

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

Тогда в JavaScript/JQuery ...

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

$('pw').val() 

Answer 4

Там нет никакой возможности, чтобы показать autofilled пароль по соображениям безопасности. Любой может видеть ваш пароль на вашем компьютере для этой страницы, если это возможно.

Вы должны иметь дело со следующими для полного решения:

• Javascript не допускается - то вы не должны отображаться выбрать пароль, CheckBox
• автозаполнения включен - как я уже писал, вы «Невозможно показать пароль, заполненный таким образом. Eaighter отключает автозаполнение или скрывает пароль для показа, пока пользователь не перепечатает пароль.

автозаполнения выключить этим JQuery

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

Для добавления флажок на лету, вы можете использовать следующие JQuery-showPassword плагина доступна на 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); 
    } 
}); 

Что-то, как это будет найти вход области и сохраните значение в переменной, называемой showValue. Затем вы можете заменить элемент с типом = «пароль», с новым html, где type = «text», и если флажок снят, значение будет сброшено в поле типа пароля.

Существует проблема с этим методом в том, что значение типа пароля будет отображаться в коде, однако, чтобы обойти это, вы всегда можете удалить атрибут значения из типа пароля и просто заставлять пользователя повторно вводить его. Если вы можете жить с этим в своем приложении.

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>