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 a 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 the 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 buttons, 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 the setAttribute() method.
Example 1: In this example, we will see to use toggle password visibility in forms.
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:
In this example, we fetch the password using getAttribute(). This fetching is done when an event (click) is created.
Last Updated :
05 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...