Как реализовать функцию показа/скрытия пароля в поле input type="password"?

Основная идея

Функция показа/скрытия пароля реализуется путём динамического изменения атрибута type HTML-элемента <input>. Когда поле имеет тип password, символы скрыты; при переключении на text они становятся видимыми. Это простой и нативный способ без использования дополнительных библиотек.

Пример реализации

Рассмотрим базовый пример с кнопкой-переключателем:

<input type="password" id="passwordInput" placeholder="Введите пароль">
<button id="toggleBtn">Показать пароль</button>

<script>
  const input = document.getElementById('passwordInput');
  const btn = document.getElementById('toggleBtn');

  btn.addEventListener('click', function() {
    const isPassword = input.type === 'password';
    input.type = isPassword ? 'text' : 'password';
    btn.textContent = isPassword ? 'Скрыть пароль' : 'Показать пароль';
  });
</script>

В этом коде при каждом клике на кнопку проверяется текущий тип поля. Если он password, меняем на text и обновляем текст кнопки, и наоборот.

Улучшения и особенности

• Доступность: добавьте атрибут aria-label для кнопки, чтобы экранные чтецы корректно описывали её действие.
• Безопасность: после скрытия пароля не рекомендуется сохранять его в открытом виде в DOM — переключение типа не влияет на значение поля, оно остаётся в памяти браузера.
• Иконки вместо текста: часто используют иконки глаза (открытый/закрытый) для более интуитивного интерфейса. В этом случае меняйте класс или src изображения.

Вывод

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