Las contraseñas son esos 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.
En este artículo, aprenderemos cómo alternar la visibilidad de la contraseña usando Bootstrap.
Acercarse:
- Usaremos algunas clases de iconos de Bootstrap: bi, bi-eye-slash y bi-eye.
- Alterne estas clases usando JavaScript.
- Alternaremos el tipo de campo de entrada de contraseña (texto a contraseña y contraseña a texto).
Archivos a importar:
Para los íconos en el campo de entrada (Icono de ojo)
<enlace rel=”hoja de estilo” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css” />
Para diseñar elementos de formulario, como botón, agregar relleno, etc.
<enlace rel=”hoja de estilo” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integridad=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” origen cruzado =”anónimo”>
Explicación de la función Javascript:
- Estamos obteniendo la identificación de la contraseña usando el método getAttribute() y determinando su tipo. Esta búsqueda se realiza cuando se crea un evento (clic).
- Si es texto , conviértalo en la contraseña.
- Si es una contraseña , conviértala en texto.
- La conversión se realiza mediante el método setAttribute().
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toggle Password Visibility</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css" />
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<style>
form i {
margin-left: -30px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>Sign In</h1>
<form>
<p>
<label>Username:</label>
<input type="text"
name="userID" id="userID">
</p>
<p>
<label>Password:</label>
<input type="password"
name="password" id="password" />
<i class="bi bi-eye-slash"
id="togglePassword"></i>
</p>
<button type="submit" id="submit"
class="btn btn-primary">
Log In
</button>
</form>
</div>
<script>
const togglePassword = document
.querySelector('#togglePassword');
const password = document.querySelector('#password');
togglePassword.addEventListener('click', () => {
// Toggle the type attribute using
// getAttribure() method
const type = password
.getAttribute('type') === 'password' ?
'text' : 'password';
password.setAttribute('type', type);
// Toggle the eye and bi-eye icon
this.classList.toggle('bi-eye');
});
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akshitsaxenaa09 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA