En este sencillo HowTo aprenderás a ocultar y mostrar contraseñas de elementos de formulario usando JavaScript, Bootstrap 4> y Fontawesome 5>.
Para ello vamos a necesitar hacer uso de los siguientes lenguajes y frameworks:
- HTML5, para poder crear el formulario.
- CSS, para poder ubicar el botón que mostrará y ocultará la clave.
- Bootstrap 4>, el framework que nos permite maquetar el formulario.
- FontAwesome 5>, el framework que muestra los iconos que permiten interactuar con elementos del formulario.
- JavaScript, que incluye los eventos de escucha que permiten interaccionar con los elementos del formulario.
Para ver un ejemplo en funcionamiento haz clic aquí. Para descargar el código del ejemplo puedes visitar JSFiddle. Recuerda que hay muchas formas de realizar este ejemplo, ya sea simplicándolo con jQuery, Bootstrap JS y similares y qué esta es otra opción válida como cualquier otra.
Frameworks y elementos HTML
Para empezar necesitamos incrustar los frameworks que vamos a utilizar. Recordemos que vamos a necesitar tanto Bootstrap 4> como Fontawesome 5>, por lo que los incluiremos en la cabecera de nuestra página web.
|
1 2 3 |
<link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" /> |
El siguiente paso es incluir los elementos del formulario que necesitaremos mostrar al usuario.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form name="contact" id="contact" action="" method="post"> <div class="form-group"> <label for="departamento"> Clave: <input type="password" name="password" class="form-control password1" value="clave" placeholder="" /> <span class="fa fa-fw fa-eye password-icon show-password"></span> </label> </div> <div class="form-group"> <label for="departamento"> Repita la clave: <input type="password" name="password2" class="form-control password2" value="clave" placeholder="" /> <small id="emailHelp" class="form-text text-muted">Las claves deben coincidir</small> </label> </div> </form> |
Maquetación CSS
Vamos a incluir una clase CSS para poder ubicar el icono que permite al usuario interactuar con el elemento INPUT de formulario.
|
1 2 3 4 5 6 |
.password-icon { float: right; position: relative; margin: -25px 10px 0 0; cursor: pointer; } |
Eventos Javascript
Por último incluiremos el código JavaScript, que incluye un evento click que controla cada interacción del usuario con el icono de mostrar y ocultar clave.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script> window.addEventListener("load", function() { // icono para poder interaccionar con el elemento showPassword = document.querySelector('.show-password'); showPassword.addEventListener('click', () => { // elementos input de tipo password password1 = document.querySelector('.password1'); password2 = document.querySelector('.password2'); if ( password1.type === "text" ) { password1.type = "password" password2.type = "password" showPassword.classList.remove('fa-eye-slash'); } else { password1.type = "text" password2.type = "text" showPassword.classList.toggle("fa-eye-slash"); } }) }); </script> |
Los códigos y una demo del ejemplo se pueden descargar de JSFiddle.
