Las contraseñas son aquellos tipos de entrada que aparecen como ****** . Se puede mostrar al usuario agregando una característica del icono del ojo para que el usuario pueda ver la contraseña.
Acercarse
- Mostraremos el uso de dos iconos de imagen “ eye.png ” y “ eyelash.png ”
- Alterne estas imágenes usando JavaScript.
- Alternaremos el tipo de campo de entrada de contraseña (texto -> contraseña y contraseña -> texto)
Ejemplo:
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>
Producción:
alternar el campo Contraseña
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA