Показать/скрыть пароль
Показать/скрыть пароль в форме ввода
Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.Показать пароль по чекбоксу
<div class="password"> <input type="password" id="password-input" placeholder="Введите пароль" name="password"> <label><input type="checkbox" class="password-checkbox"> Показать пароль</label> </div>
$('body').on('click', '.password-checkbox', function(){ if ($(this).is(':checked')){ $('#password-input').attr('type', 'text'); } else { $('#password-input').attr('type', 'password'); } });
Показать пароль по ссылке
<div class="password"> <input type="password" id="password-input" placeholder="Введите пароль" name="password"> <a href="#" class="password-control">Показать пароль</a> </div>
$('body').on('click', '.password-control', function(){ if ($('#password-input').attr('type') == 'password'){ $(this).html('Скрыть пароль'); $('#password-input').attr('type', 'text'); } else { $(this).html('Показать пароль'); $('#password-input').attr('type', 'password'); } return false; });
Показать пароль по иконке
<div class="password"> <input type="password" id="password-input" placeholder="Введите пароль" name="password"> <a href="#" class="password-control"></a> </div>
.password { position: relative; } .password-control { position: absolute; top: 11px; right: 6px; display: inline-block; width: 20px; height: 20px; background: url(/view.svg) 0 0 no-repeat; } .password-control.view { background: url(/no-view.svg) 0 0 no-repeat; } $('body').on('click', '.password-control', function(){ if ($('#password-input').attr('type') == 'password'){ $(this).addClass('view'); $('#password-input').attr('type', 'text'); } else { $(this).removeClass('view'); $('#password-input').attr('type', 'password'); } return false; });
Без jQuery
<div class="password"> <input type="password" id="password-input" placeholder="Введите пароль" name="password"> <a href="#" class="password-control" onclick="return show_hide_password(this);"></a> </div>
function show_hide_password(target){ var input = document.getElementById('password-input'); if (input.getAttribute('type') == 'password') { target.classList.add('view'); input.setAttribute('type', 'text'); } else { target.classList.remove('view'); input.setAttribute('type', 'password'); } return false; }