Статьи по JavaScript

Показать и скрыть пароль в html-формe с помощью JavaScript и CSS.

В этом руководстве вы узнаете, как скрывать и отображать пароли в поле ввода формы.

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

  • 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)

Результат работы примера можно посмотреть по ниже.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *