Wie schaltet man die Passwortsichtbarkeit mit HTML und JavaScript um?
Passwörter sind die Eingabetypen, die als ****** angezeigt werden . Es kann dem Benutzer angezeigt werden, indem eine Funktion des Augensymbols hinzugefügt wird, damit der Benutzer das Passwort sehen kann.
Sich nähern
- Wir zeigen die Verwendung von zwei Bildsymbolen „ eye.png “ und „ eyeslash.png “ .
- Schalten Sie diese Bilder mit JavaScript um.
- Wir werden die Art des Eingabefelds für das Passwort umschalten ( Text -> Passwort und Passwort -> Text )
Beispiel:
HTML
<!DOCTYPE html> <html> <body> <h2 style="color:green"> GeeksforGeeks </h2> <div class="col-sm-6"> <form method="post" class="form-group "> Username <input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" required="" id="id_username" class="form-control"> Password <input type="password" name="password" class="form-control" autocomplete="current-password" required="" id="id_password"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210917150049/eyeslash-300x240.png" width="1.8%" height="1%" style="margin-left: -5%;display:inline; vertical-align: middle" id="togglePassword"> <button type="submit" class="btn btn-primary"> Login </button> </form> </div> </body> <script> const togglePassword = document.querySelector('#togglePassword'); const password = document.querySelector('#id_password'); togglePassword.addEventListener('click', function (e) { // Toggle the type attribute const type = password.getAttribute( 'type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); // Toggle the eye slash icon if (togglePassword.src.match( "https://media.geeksforgeeks.org/wp-content/uploads/20210917150049/eyeslash.png")) { togglePassword.src = "https://media.geeksforgeeks.org/wp-content/uploads/20210917145551/eye.png"; } else { togglePassword.src = "https://media.geeksforgeeks.org/wp-content/uploads/20210917150049/eyeslash.png"; } }); </script> </html>
Ausgabe: