html поле ввода пароля с глазом

Показать и скрыть пароль в поле ввода

В материале подробно узнаем, как можно поставить кнопку в поде ввода для пароля, где при клике на ее показывается пароль в оригинальном значении. Где безусловно такая функция очень нужна, ведь при вводе пароля мы его не видим, но рядом будет установлена иконка, где при клике вы можете рассмотреть полностью те знаки, которые вы прописали. Что больше контролирует, чтоб изначально гость или пользователи написали правильные знаки своего пароля.

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

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

Показать или скрыть пароль при помощи JQuery

Произвести показа пароля с помощью чекбоксу

Здесь идет стандартная форма, только функция находится за рамкой.

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

Произвести показ пароля по клику иконке

Здесь также нужно выставить библиотеку, которую можно взять в начале статьи, ведь она идет и на этот вариант.

Показать пароль по ссылке

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

Показать пароль без jQuery

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

Источник

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

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

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

Подключение bootstrap, fontawesom и код HTML

Для начала нам нужно подключить фреймворки, которые мы будем использовать. Напоминаем, что нам понадобятся и Bootstrap 4, и Fontawesome 5. Поместим их в верхнюю часть нашей веб-страницы.

Следующим шагом будет добавление элементов формы, которые мы хотим показать пользователю.

Разметка CSS

Добавим CSS-класс для размещения иконки, позволяющей пользователю взаимодействовать с элементом формы INPUT.

События на Javascript

Затем добавим код JavaScript, который содержит событие click, контролирующее каждое взаимодействие пользователя с иконкой клавиши show и hide.

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

Похожие записи

Недавно я показал вам, как форматировать даты в JavaScript, но мы делали это вручную, извлекая…

В этой статье я покажу вам способ форматирования даты (или объекта Date) в JavaScript. Мы…

Если вам нужно скопировать файл с помощью Python, но вы не знаете, как это сделать,…

Источник

Показать пароль на JS

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

HTML код

Помимо указания типов полей, обоим присваиваем классы для получения этих элементов через JavaScript.

Алгоритм действий

Сначала опишем на словах, что должно произойти.

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

Однако само по себе ничего не произойдет. Функцию нужно запустить после того, как пользователь сделает клик в каком-то поле. Как узнать, по какому из двух полей был сделан клик? Для этого повесим на инпуты слушателя событий и переберем их в цикле.

JavaScript код

Получим поле с чекбоксом и присвоим его переменной. Для удобства дадим одинаковые названия у классов элементов и у названий соответствующих переменных. Метод querySelectorAll найдет в документе поле с классом showPassword и передаст её в переменную, которую мы только что создали с таким же названием. Это обычная практика, давать одинаковые названия. Какая разница между двумя методами, узнайте из статьи «Получение элементов по селектору».

let showPassword = document.querySelectorAll(‘.showPassword’);

С помощью цикла forEach пройдемся по элементу с паролем и повесим обработчик событий addEventListener, который отловит клик и сработает функция toggleType.

showPassword.forEach(item =>
item.addEventListener(‘click’, toggleType)
);

Переходим к написанию функции, которая и будет переключать тип инпута, так и назовем её toggleType. Далее работаем с полем, куда будет вводиться пароль. Как получить это поле? Метод closest() возвращает ближайший родительский элемент с классом inputs, внутри которого несколько полей, которые будут работать независимо друг от друга. Вся эта конструкция, начиная с ключевого слова this отправляется в переменную input. В условии мы будем работать с этой переменной, чтобы не писать повторяющийся код.

Создадим условие if-else, при какой ситуации переключать тип полей. Если текущий тип поля password (чекбокс отмечен), то поменять его на текстовый тип. В противном случае оставить, как есть.

Источник

Поле для ввода пароля

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

Синтаксис создания следующий.

Атрибуты совпадают с атрибутами текстового поля и перечислены в табл. 1.

Табл. 1. Атрибуты поля с паролем

Атрибут	Описание
size	Ширина поля с паролем, которая определяется числом звёздочек моноширинного шрифта.
maxlength	Устанавливает максимальное число символов, которое может быть введено пользователем в поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку больше самого поля.
name	Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value	Начальный текст, который выводится в поле. Этот текст не отображается и заменяется звездочками.

Поле для пароля нашло широкое применение на сайтах для авторизации пользователей и разграничения доступа к разделам сайта, где требуется подтвердить свои полномочия. В примере 1 показано, как создавать подобные поля.

Источник

Html поле ввода пароля с глазом

Улучшаем поля ввода пароля

Сегодня мы поговорим о возможных улучшениях поля ввода паролей на сайтах. Дело в том, что вводя пароль, вместо вводимых символов мы видим только звездочки и поэтому часто ошибаемся (если только вы не мастер слепого метода печати). Согласитесь, что это не очень хорошо.

Именно поэтому я решил сделать плагин для jQuery, который бы как-то показывал вводимые символы. В этой статье вас ждет мое решение с выводом вводимого символа справа от поля ввода пароля и решение от Криса Койера, автора сайта «Трюки CSS» в стиле айфоновского ввода паролей.

Ввод паролей как в iPhone

Это плагин к jQuery, как я уже говорил, сделал Крис Койер. Суть в том, что при ввода пароля вы видите последний введенный символ, а все предыдущие заменяются на звездочки (или любые другие спецсимволы).

Как это работает? Схема такая. Скрипт создает копию вашего парольного поля, но с типом «текст», исходное поле скрывается и ввод символов идет в клона. Теперь рассмотрим использование.

Как вы видите, я задал свои значения для времени показа последнего символа (duration) и интервала между показами символов (interval). Если вы печатаете быстро, то можете увидеть сразу несколько «открытых» символов.

Показ последнего введенного символа справа от поля

Надо заметить, что статью Криса я увидел уже после того, как написал свой плагин. Так что у нас с ним есть две реализации одной и той же идеи. Можете взять ту, которая удобнее вам, но я расскажу про свою 😉

Итак, все просто. Вам нужно лишь указать, к какому инпуту применить плагин и задать в стилях настройки для спана, содержащего вводимый символ. Плагин сам создаст спан с указанным классом (по умолчанию — typed-char) и расположит его справа от инпута. В общем, рассмотрим использование.

Вот такие нехитрые скрипты на мой взгляд смогут чуть-чуть улучшить ввод пароля. Удачи!

Автор: Павел Марковнин

Сооснователь Временно.нет. Интересуется онлайн бизнесом, дизайном, юзабилити и клиентским программированием. Участвует в разработке нескольких интернет-проектов.

Иногда пишет в Твиттер, но чаще на Временно.нет.

Расскажите друзьям

Комментарии — 27

Источник