How to toggle password visibility in forms using Bootstrap-icons ?
Passwords are those input types that appear as ******. It can be shown to the user by adding a feature of the eye icon so that the user can see the password.
In this article, we will learn how to toggle password visibility using Bootstrap.
Approach:
- We will use few classes of Bootstrap-icons – bi, bi-eye-slash, and bi-eye.
- Toggle these classes using JavaScript.
- We will toggle the type of input field of password ( text to password and password to text ).
Files to be imported:
For the icons in the input field ( Eye Icon)
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css” />
To style form elements, like button, adding padding, etc
<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”>
Explanation of Javascript Function:
- We are fetching the id of the password using the getAttribute() method and determining its type. This fetching is done when an event (click) is created.
- If it is text then convert it into the password.
- If it is a password then convert it to text.
- Conversion is done using setAttribute() method.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Toggle Password Visibility</title> <link rel="stylesheet" href= <link rel="stylesheet" href= 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> |
Output:
Please Login to comment...