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...