Inputfield (Password)
CODE
×
HTML
<div class='form-group password-field'> <input type=password value='' class='floating-label' placeholder="Passwort" autocomplete="off" data-lp-ignore data-lpignore="true"> <label class='floating-label'>Passwort</label> <img class='show' src='img/show.svg'> </div>
CSS
@media screen and (max-width: 767px) { div.form-group.password-field { width: 100%; } } div.form-group { position:relative; max-width: 800px; } input[type=password].floating-label { position:relative; padding-right: 62px; } img.show { position: absolute; height: 31px; width: 31px; right: 16px; top: 33px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; opacity: 0.3; } img.show:hover, img.show:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } img.show.open { opacity: 1 } label.floating-label { font-size: 13px; line-height: 17px; font-family: 'Roboto'; font-style: normal; font-weight: 400; position:absolute; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 1px; left: 23px; background-color: #fff; padding: 2px 5px; opacity:1; }
JS
document.addEventListener("DOMContentLoaded", function() { const passwordField = document.querySelector("input[type='password']"); const toggleIcon = document.querySelector("img.show"); if (passwordField && toggleIcon) { function toggleOpenClass() { if (passwordField.value.length > 0) { toggleIcon.classList.add("open"); // Klasse hinzufügen } else { toggleIcon.classList.remove("open"); // Klasse entfernen } } passwordField.addEventListener("input", toggleOpenClass); toggleIcon.addEventListener("click", function() { // Passwortsichtbarkeit umschalten if (passwordField.type === "password") { passwordField.type = "text"; // Passwort anzeigen toggleIcon.src = "img/hide.svg"; // Zu "geschlossenem Auge"-Icon wechseln toggleIcon.classList.remove("show"); toggleIcon.classList.add("hide_"); } else { passwordField.type = "password"; // Passwort verstecken toggleIcon.src = "img/show.svg"; // Zu "offenem Auge"-Icon wechseln toggleIcon.classList.remove("hide_"); toggleIcon.classList.add("show"); } }); } else { // Falls das Passwortfeld oder das Icon nicht vorhanden sind, nichts tun. console.log("Passwortfeld oder Toggle-Icon nicht gefunden."); } });
Inputfield (Password)
Erstellt: 12.09.2024 - 11:46 Uhr
Letzte Änderung: 15.01.2025 - 10:58 Uhr
×
Passwort