От автора: на большинстве веб-сайтов при заполнении пароля в форме либо для регистрации, либо для входа в систему вы часто увидите кнопку (или флажок), с помощью которой можно задать отображение паролей. Это часто бывает полезно для пользователей, и пользователь, если не уверен, может проверить, не сделали ли они ошибку.
В этом уроке мы создадим аналогичный проект, в котором мы можем ввести наш пароль в форме и установить флажок, чтобы отображать или скрывать его. Давайте начнем. Требования:
Прежде чем мы начнем, сначала нужно иметь несколько вещей. Некоторые из требований заключаются в следующем: HTML, CSS, Основные знания JavaScript (ES6), DOM.
Основное понимание вышеперечисленных навыков достаточно для того, чтобы вы могли следовать и понимать код в уроке. Для контекста это образец того, что мы будем строить. В конце этого урока мы будем иметь что-то вроде этого:
Окончательный фрагмент кода будет предоставлен в ссылке Codepen в конце статьи.
Настройка нашей среды
Откройте редактор кода. Я использую Visual Studio Code. Вы можете использовать то, с чем вам больше всего нравится.
Внутри редактора создайте каталог с именем password-toggle (используйте любое имя, которое хотите, это просто для описательных целей)
Внутри каталога password-toggle:
Создайте файл index.html
Создайте файл style.css
Создайте файл main.js
Ваша файловая структура должна быть такой:
|
1 2 3 4 5 6 7 8 |
password-toggle/ │ ├── index.html │ ├── style.css │ ├── app.js │ |
Перейдем к разработке. В нашем index.html добавьте шаблон по умолчанию и назовите title «How to display or hide password».
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>How to display or hide password</title> </head> <body> </body> </html> |
Совет от про: Если вы используете Visual Studio Code, то при вводе ! и нажатии tab или enter на клавиатуре, редактор будет автоматически заполнять остальную часть шаблона для вас. Если вы используете другие редакторы, такие как Sublime Text или Atom, вам нужно будет установить расширение Emmet для этого.
Теперь, давайте свяжем наш CSS и файл JavaScript с нашим HTML, чтобы мы могли использовать оба.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>How to display or hide password</title> <link rel="stylesheet" href="style.css"> </head> <body> <script src="app.js"></script> </body> </html> |
Создадим поле формы, чтобы было, куда вводить пароль.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Password Toggle</title> <link rel="stylesheet" href="style.css"> </head> <body> <form> <label for="password">Password</label> <input type="password" id="password" placeholder="Enter your Password"> <label for="togglePassword>show password</label> <input type="checkbox" id="togglePassword"> <button type="button">Submit</button> </form> <script src="script.js "></script> </body> </html> |
Файл CSS должен содержать следующие стили. Это просто, чтобы он выглядел презентабельно. Не стесняйтесь стилизовать на свой вкус.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
body { font-family: 'Arial', 'Helvetica', sans-serif; text-align: center; margin-top: 100px; } input[type=password], input[type=text] { border: 1px #b6e7f9 solid; padding: 5px 10px; } input[type=checkbox] { vertical-align: middle; } button { padding: 10px 20px; margin-top: 20px; color: #fff; background-color: #65b0ed; border: none; display: inline-block; cursor: pointer; } |
Сохраните код и откройте файл в браузере. Страница должна быть примерно такой:
Перейдем к файлу app.js и начнем писать наш код JavaScript. Наша логика псевдокода должна быть такой: когда пользователь нажимает флажок показать пароль, тип ввода должен быть изменен на text. Это позволит отображать пароль в виде обычного текста.
Мы будем использовать стрелочную функцию ES6 для записи нашей функции. Во-первых, давайте назначим тег элемента флажка и сохраним его в переменной:
|
1 |
const togglePassword = document.getElementById("togglePassword"); |
Document.getElementById() возвращает элемент HTML, свойство id которого соответствует указанной строке. Поскольку идентификаторы элементов должны быть уникальными, если они указаны, они являются полезным способом быстрого доступа к определенному элементу.
После присвоения элемента checkbox переменной, давайте напишем нашу функцию, которая будет содержать код, чтобы наше приложение работало.
|
1 2 3 4 5 6 7 8 |
const showOrHidePassword = () => { const password = document.getElementById('password'); if (password.type === 'password') { password.type = 'text'; } else { password.type = 'password'; } }; |
Строка 1: нашей функции присваивается имя showOrHidePassword в верблюжьем регистре.
Строка 2: мы назначили поле ввода с идентификатором password, который является полем пароля для переменной с паролем.
Строка 3: Мы выполнили if-выражение, чтобы проверить, является ли тип ввода текстовым с использованием password.type (помните, что password — это переменная, назначенная для поля ввода в HTML).
Строка 4: Если if возвращает true (тип ввода — это пароль), тогда мы хотим изменить его на текст.
Строка 6: если он возвращает false (тип ввода — это текст), мы хотим изменить его на пароль.
Наш код почти завершен, осталось только добавить обработчик событий для прослушивания события (в данном случае событие изменения), чтобы при установке флажка функция выполнялась.
|
1 |
togglePassword.addEventListener("change", showOrHidePassword); |
Codepen ниже содержит весь код:
Автор: Emmanuel Raymond
Источник: //codeburst.io/
Редакция: Команда webformyself.
