Логово верстальщика

👩‍💻 Переключение видимости пароля

Создайте поле для ввода пароля и кнопку "Показать/Скрыть". При нажатии на кнопку символы пароля должны переключаться между скрытым (type="password") и видимым (type="text") состоянием.

Требования:

• Кнопка переключает тип поля ввода пароля между "password" и "text".
• Текст кнопки меняется в зависимости от текущего состояния видимости пароля.

Решение задачи🔽

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

const password = document.getElementById('password');
const toggleBtn = document.getElementById('toggleBtn');

toggleBtn.addEventListener('click', () => {
const isHidden = password.type === 'password';
password.type = isHidden ? 'text' : 'password';
toggleBtn.textContent = isHidden ? 'Скрыть' : 'Показать';
});

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1👍1

www.tgoop.com/webdevlair/3873

870 viewsSep 4 at 17:07

👩‍💻 Переключение видимости пароля

Создайте поле для ввода пароля и кнопку "Показать/Скрыть". При нажатии на кнопку символы пароля должны переключаться между скрытым (type="password") и видимым (type="text") состоянием.

Требования:

• Кнопка переключает тип поля ввода пароля между "password" и "text".
• Текст кнопки меняется в зависимости от текущего состояния видимости пароля.

Решение задачи🔽

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

const password = document.getElementById('password');
const toggleBtn = document.getElementById('toggleBtn');

toggleBtn.addEventListener('click', () => {
const isHidden = password.type === 'password';
password.type = isHidden ? 'text' : 'password';
toggleBtn.textContent = isHidden ? 'Скрыть' : 'Показать';
});