Как показать и скрыть пароль на 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, что будет оригинально смотреться от других стандартных сайтов. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
