Кнопка "Показати пароль" на JavaScript + анімація

При введенні пароля легко помилитися, оскільки символи, які вводить користувач - приховані. У цьому уроці додамо кнопку показати пароль для форм введення даних на сайтах, додамо анімацію часу, що залишився до приховання. Технології, які будемо застосовувати – JavaScript, для оформлення – Boostrap. Так виглядатиме результат:

Список тем, які будуть показані:

• робота з DOM
• робота з атрибутами
• робота з інтервалами - таймерами
• розбір багів під час роботи з інтервалами

Для початку створимо стандартну структуру - папку програми, файл index.html, app.js, app.css, створимо стандартну верстку в html та підключимо javascript та css файли.

Код писатимемо кроками. Для початку виконаємо роботу на кістяку, а потім додамо оформлення. Отже, створимо верстку виду:

<input type="password" id="password" value="qwerty123">
<button type="button" id="show-password-btn">Show</button>

Цього достатньо для початку роботи. Щоб щоразу не вводити пароль – додано value, звичайно ж у реальному проекті це не потрібно. Поставимо завдання – при натисканні кнопки show показувати пароль на якийсь час, а потім приховувати. Логіка коду – змінювати атрибут type="password" на type="text" і через проміжок часу – повертати атрибути у вихідний стан.

Пишемо код JavaScript

Пропишемо необхідні для роботи дані у вигляді констант:

const showPasswordButton = document.querySelector('#show-password-btn');
const passwordInput = document.querySelector('#password');

const TIME_SHOW_PASSWORD = 5000;

де TIME_SHOW_PASSWORD - час, на який показуватимемо пароль.

Тепер необхідно виконати перевірку – якщо константа showPasswordButton не порожня, то додати подію – функцію показати пароль.

if (showPasswordButton && passwordInput) showPasswordButton.addEventListener('click', showPassword);

В даному випадку addEventListener - правильний вибір, оскільки на кнопку можуть додаватися й інші дії кліку.

Реалізуємо функцію showPassword.

function showPassword(){}

Що має виконувати функція? Рахуємо:

• встановити атрибут type для поля пароля на text
• через проміжок часу TIME_SHOW_PASSWORD повернути все назад.

Реалізуємо:

function showPassword(){
  passwordInput.setAttribute('type', 'text');
  setInterval(function(){
    passwordInput.setAttribute('type', 'password');
  }, TIME_SHOW_PASSWORD);
}

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

Зробимо анімацію поля input. Найпростіші рішення - зробити смужку за допомогою прогресу нижче, також було б просто якби тег input був парним і вставити в нього елемент, який можна змінювати по ширині. Однак ми не шукаємо легких шляхів і будемо анімувати тег input за допомогою фону. Якщо вам потрібно реалізувати два кольори на фоні - застосуємо градієнт. Зробимо його двоколірним – колір та прозорість. І задамо налаштування для анімації. У CSS пропишіть:

.animate-password {
     background-image: linear-gradient(90deg, #ededed 50%, transparent 50%);
     background-size: 200%;
     background-position-x: 100%;
     transition: all ease 1s;
     animation-name: passwordanimation;
     animation-duration: 5s;
     animation-iteration-count: 1;
     animation-timing-function: linear;
}

важливо зрозуміти перші три рядки. Ми створюємо градієнт із двох кольорів – сірий і повністю прозорий. Без плавного переходу кольору. У початковому положенні потрібно, щоб сірий фон був за межами input, його не було видно, тому ми розтягуємо градієт вдвічі більше ніж input - background-size: 200% і зміщуємо за межі зони видимості background-position-x: 100%. Всі інші властивості – налаштування анімації. Анімуватимемо зміщення фону.

Додамо анімацію, вона дуже проста:

@keyframes passwordanimation {
     0% {background-position-x: 100%;}
     100% {background-position-x: 0;}
}

І внесемо зміну до функції showPassword:

function showPassword(){
  passwordInput.setAttribute('type', 'text');
  passwordInput.classList.add('animate-password');

  setInterval(function(){
      passwordInput.setAttribute('type', 'password');
      passwordInput.classList.remove('animate-password');
  }, TIME_SHOW_PASSWORD);
}

Тепер натискаючи кнопку – отримуємо анімацію поля пароля – зворотний відлік до приховання пароля. І якщо постійно натискати кнопку, то можна побачити проблеми - через якийсь час пароль відображатиметься і ховатиметься з рандомними інтервалами, які явно менші за 5 секунд. У чому проблема? Як виправити баг setInterval?

Виправляти помилку будемо двома шляхами. Перший - додамо перевірку, якщо натиснута кнопка Show і поле пароля містить клас animate-password, то виходитимемо з функції, це дозволить не допустити виконання анімацій та додаткових запусків інтервалів якщо пароль відображається зараз. Друге правило – чистити за собою запущені таймери та інтервали. Реалізуємо:

function showPassword(){
     if (passwordInput.classList.contains('animate-password')) return;
	 passwordInput.setAttribute('type', 'text');
	passwordInput.classList.add('animate-password');

	let interval = setInterval(function(){
		passwordInput.setAttribute('type', 'password');
		passwordInput.classList.remove('animate-password');
		clearInterval(interval);
	}, TIME_SHOW_PASSWORD);
}

Перевіряємо – все працює!

Якщо у вас залишилися питання - перегляньте відео. Зауваження та запитання можна задати у чаті ItGid.info.