ZorNet.Ru — сайт для вебмастера » HTML и CSS » Как показать и скрыть пароль на JavaScript

Как показать и скрыть пароль на JavaScript

Как показать и скрыть пароль на JavaScript
В этой статье узнаете, как создать функцию - показать и скрыть пароль по клику, где задействуем кнопочный и шрифт и JavaScript для полной работы. Вероятно многим часто приходилось наблюдать этот тип переключения, который идет для видимости пароля в случае различных типов форм или для входа в систему. Также такой тип функционала присутствует на Хром браузере, которые вы сохраняете, где по умолчанию он в браузере скрыт, но стоит нажать на кнопку по правую сторону, и покажется пароль на данный сайт. Теперь такой формат можно разместить на сайте для пользователей, где безусловно они будут видеть только свой пароль при регистрациях, что по умолчанию она аналогично будет скрыт.

Ведь не секрет, что такой тип тот небольшого дизайна, который создан с помощью JavaScript, стал для пользователя популярен. Ведь если он сохранил пароль, то ему не нужно будет делать многочисленные переходы, чтоб узнать в самом браузере, он за секунду просмотрит его на данном портале, где будет подключен скрытие и показ паролей. Обычно в случае формы входа в систему при вводе пароля он отображается в формате точки. Этот тип дизайна помогает преобразовать точечный формат в текст. Нам только для начало нужно поставить стилистику, это у кого не прописана, которая идет для показа и дальнейшего скрытия пароля при помощи значка, под видом глаза.

Так по умолчанию при установки будет выглядеть при открытие сайта или страницы.

После проверки на работоспособность:

Переключатель видимости пароля

Установка:

Это стили под шрифтовые значение, у большинства они уже подключены, если у вас их нет, то на данной страницы в HEAD вписываем. Где после этого вы можете не только поставить данный знак на этом материале, а по всему сайту сделать оформление.

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

HTML

Код
<div class="showing_stealth">
  <input type="password" placeholder="Введите пароль" required>
  <span class="cumancen"><i class="fas fa-eye"></i></span>
  </div>

CSS

Код
.showing_stealth{
  position: relative;
  height: 56px;
  width: 315px;
  margin: 118px auto;
  border-radius: 5px;
  box-shadow: 0px 3px 3px rgba(0,0,0,0.1);
}
.showing_stealth input {
  width: 100%;
  height: 100%;
  border: none;
  padding-left: 14px;
  font-size: 20px;
  outline: none;
  border-radius: 3px;
}
.showing_stealth input::placeholder{
  font-size: 20px;
}
.showing_stealth span {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: #0a2346;
  cursor: pointer;
  display: block;
}

.showing_stealth span i.conceal-btn::before{
  content: "\f070";
}

JS

Код
const passField = document.querySelector("input");
  const showBtn = document.querySelector("span i");
  showBtn.onclick = (()=>{
  if(passField.type === "password"){
  passField.type = "text";
  showBtn.classList.add("conceal-btn");
  }else{
  passField.type = "password";
  showBtn.classList.remove("conceal-btn");
  }
  });

Если ранее такая функция была на топовых сайтах, то сейчас при создание сайта можно подключить скрытие с показом пароля в исполнение JavaScript, что будет оригинально смотреться от других стандартных сайтов.

Демонстрация
03 Декабря 2021 Загрузок: 2 Просмотров: 2601 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 03 Декабря 2021 22:571
0
Как оказалось на сайте уже была аналогичная тема, что можете перейти и рассмотреть, ведь там представлено несколько вариантов.
avatar