Пароль Скрыть/Показать html Form
Если в форме есть поле пароля с типом password, то было бы не плохо, добавить иконку глаза в поле и сделать возможность менять тип поля с password на text и обратно. Таким образом мы добьемся скрытия и показа пароля в поле.
Что нужно показа пароля в Password ?
1. Напишем для начала само поле, обернув его в класс password-toggle и тег span для отображения глаза
<div class="password-toggle">
<input type="password" name="password">
<span></span>
</div>
2. А теперь напишем стиль для поля
.password-toggle {
position: relative;
width: 100%;
}
.password-toggle span {
background-image: url(images/eye.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 25px;
margin-bottom: auto;
position: absolute;
margin-top: auto;
cursor: pointer;
opacity: 0.3;
height: 30px;
width: 30px;
right: 10px;
bottom: 0;
top: 0;
}
.password-toggle span.show {
background-image: url(images/eye-hide.svg);
}
Для этого нам нужны 2 картинки глаза. eye.svg и eye-hide.svg (показать / скрыть пароль)
А теперь осталось заставить все это работать, с помощью JS и jQuery
$("body").on("click", ".password-toggle span", function (e) {
let now = $(this).parents('.password-toggle').find('input');
if (now.attr('type') == 'password') {
now.attr('type', 'text')
} else {
now.attr('type', 'password')
}
$(this).toggleClass('show')
});
Готово! При клике на глаз, глаз зачеркивается и значение в поле пароля, становится видным. И наоборот при повторном клике. Задача выполнена!
Добавить комментарий