В этом руководстве вы узнаете, как скрывать и отображать пароли в поле ввода формы.
Для этого нам потребуется использовать следующие языки и фреймворки:
- HTML5, чтобы создать форму.
- CSS, чтобы указать местоположение иконки, которая будет показывать и скрывать пароль.
- Bootstrap 4, фреймворк, который поможет нам сверстать форму.
- FontAwesome 5, фреймворк, отображающий иконку, с помощью которых можно взаимодействовать с элементами формы.
- JavaScript, который содержит слушающие события, позволяющие взаимодействовать с элементами формы.
Содержание
Подключение bootstrap, fontawesom и код HTML
Для начала нам нужно подключить фреймворки, которые мы будем использовать. Напоминаем, что нам понадобятся и Bootstrap 4, и Fontawesome 5. Поместим их в верхнюю часть нашей веб-страницы.
<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
Code language: HTML, XML (xml)
Следующим шагом будет добавление элементов формы, которые мы хотим показать пользователю.
<div class="container">
<form name="contact" id="contact" action="" method="post">
<div class="form-group">
<label for="department">
Введите пароль:
<input type="password" name="password" class="form-control password1" value="pass" placeholder="" />
<span class="fa fa-fw fa-eye password-icon show-password"></span>
</label>
</div>
<div class="form-group">
<label for="department">
Повторите пароль:
<input type="password" name="password2" class="form-control password2" value="pass" placeholder="" />
<small id="emailHelp" class="form-text text-muted">
Пароли должны совпадать</small>
</label>
</div>
</form>
</div>
Code language: HTML, XML (xml)
Разметка CSS
Добавим CSS-класс для размещения иконки, позволяющей пользователю взаимодействовать с элементом формы INPUT.
.password-icon {
float: right;
position: relative;
margin: -25px 10px 0 0;
cursor: pointer;
}
Code language: CSS (css)
События на Javascript
Затем добавим код JavaScript, который содержит событие click, контролирующее каждое взаимодействие пользователя с иконкой клавиши show и hide.
window.addEventListener("load", function() {
// иконка для отображения пароля
showPassword = document.querySelector('.show-password');
showPassword.addEventListener('click', () => {
// элементы ввода типа пароля
password1 = document.querySelector('.password1');
password2 = document.querySelector('.password2');
if ( password1.type === "text" ) {
password1.type = "password"
password2.type = "password"
showPassword.classList.remove('fa-eye-slash');
} else {
password1.type = "text"
password2.type = "text"
showPassword.classList.toggle("fa-eye-slash");
}
})
});
Code language: JavaScript (javascript)
Результат работы примера можно посмотреть по ниже.