Как задать отображение паролей в поле формы

Как задать отображение паролей в поле формы

От автора: на большинстве веб-сайтов при заполнении пароля в форме либо для регистрации, либо для входа в систему вы часто увидите кнопку (или флажок), с помощью которой можно задать отображение паролей. Это часто бывает полезно для пользователей, и пользователь, если не уверен, может проверить, не сделали ли они ошибку.

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

Прежде чем мы начнем, сначала нужно иметь несколько вещей. Некоторые из требований заключаются в следующем: HTML, CSS, Основные знания JavaScript (ES6), DOM.

Основное понимание вышеперечисленных навыков достаточно для того, чтобы вы могли следовать и понимать код в уроке. Для контекста это образец того, что мы будем строить. В конце этого урока мы будем иметь что-то вроде этого:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Окончательный фрагмент кода будет предоставлен в ссылке Codepen в конце статьи.

Настройка нашей среды

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

Внутри редактора создайте каталог с именем password-toggle (используйте любое имя, которое хотите, это просто для описательных целей)

Внутри каталога password-toggle:

Создайте файл index.html

Создайте файл style.css

Создайте файл main.js

Ваша файловая структура должна быть такой:

Перейдем к разработке. В нашем index.html добавьте шаблон по умолчанию и назовите title «How to display or hide password».

Совет от про: Если вы используете Visual Studio Code, то при вводе ! и нажатии tab или enter на клавиатуре, редактор будет автоматически заполнять остальную часть шаблона для вас. Если вы используете другие редакторы, такие как Sublime Text или Atom, вам нужно будет установить расширение Emmet для этого.

Теперь, давайте свяжем наш CSS и файл JavaScript с нашим HTML, чтобы мы могли использовать оба.

Создадим поле формы, чтобы было, куда вводить пароль.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Файл CSS должен содержать следующие стили. Это просто, чтобы он выглядел презентабельно. Не стесняйтесь стилизовать на свой вкус.

Сохраните код и откройте файл в браузере. Страница должна быть примерно такой:

Перейдем к файлу app.js и начнем писать наш код JavaScript. Наша логика псевдокода должна быть такой: когда пользователь нажимает флажок показать пароль, тип ввода должен быть изменен на text. Это позволит отображать пароль в виде обычного текста.

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

Document.getElementById() возвращает элемент HTML, свойство id которого соответствует указанной строке. Поскольку идентификаторы элементов должны быть уникальными, если они указаны, они являются полезным способом быстрого доступа к определенному элементу.

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

Строка 1: нашей функции присваивается имя showOrHidePassword в верблюжьем регистре.

Строка 2: мы назначили поле ввода с идентификатором password, который является полем пароля для переменной с паролем.

Строка 3: Мы выполнили if-выражение, чтобы проверить, является ли тип ввода текстовым с использованием password.type (помните, что password — это переменная, назначенная для поля ввода в HTML).

Строка 4: Если if возвращает true (тип ввода — это пароль), тогда мы хотим изменить его на текст.

Строка 6: если он возвращает false (тип ввода — это текст), мы хотим изменить его на пароль.

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

Codepen ниже содержит весь код:

Автор: Emmanuel Raymond

Источник: https://codeburst.io/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Курс по TypeScript

Прямо сейчас посмотрите курс по TypeScript!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree