Показать/скрыть пароль

Показать/скрыть пароль в форме ввода


Чтобы включить отображение пароля в поле password нужно заменить атрибут type="password" на type="text", сделать это можно на jQuery или чистом JS.Показать пароль по чекбоксу









$('body').on('click', '.password-checkbox', function(){
if ($(this).is(':checked')){
$('#password-input').attr('type', 'text');
} else {
$('#password-input').attr('type', 'password');
}
});

Показать пароль по ссылке




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

Показать пароль по иконке







.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







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;
}


  29.05.24 / 07:10 | PHP |   317 | 4   0