Űrlapok
Jelszó láthatóság kapcsoló
Élő előnézet – a komponens teljes méretben.
Élő előnézet
HTML · CSS · JS
<div class="max-w-sm w-full p-6 bg-gray-900 border border-gray-800 rounded-xl">
<label for="password-field" class="block mb-2 text-sm font-medium text-gray-300">Biztonsági jelszó</label>
<div class="relative w-full">
<input type="password" id="password-field" class="bg-gray-800 border border-gray-700 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 pe-10 placeholder-gray-500" placeholder="••••••••" required>
<button type="button" id="toggle-password-btn" class="absolute inset-y-0 end-0 flex items-center pe-3 text-gray-400 hover:text-white">
<!-- Szem ikon (Alapértelmezett: zárt/rejtett) -->
<svg id="eye-icon" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://w3.org">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
</button>
</div>
</div>
/* Igény szerint egyedi stílusok, de a Tailwind mindent megold a HTML-ben */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
display: none; /* Letiltja a böngészők gyári jelszómegtekintő ikonjait */
}
const passwordInput = document.getElementById('password-field');
const toggleButton = document.getElementById('toggle-password-btn');
const eyeIcon = document.getElementById('eye-icon');
toggleButton.addEventListener('click', () => {
// Típus váltása password és text között
const isPassword = passwordInput.getAttribute('type') === 'password';
passwordInput.setAttribute('type', isPassword ? 'text' : 'password');
// Ikon cseréje vagy effektezése (pl. áthúzott szem vizuális jelzésnek)
if (isPassword) {
// Nyitott szem / aktív állapot (pl. kék szín vagy más SVG)
eyeIcon.classList.add('text-blue-500');
} else {
// Visszaállítás alapállapotba
eyeIcon.classList.remove('text-blue-500');
}
});