How to toggle password visibility in forms using Bootstrap-icons ?

22 Sep, 2021
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="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>
Output:
Blogathon-2021
Bootstrap-4
Bootstrap-Questions
HTML-Questions
Blogathon
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Consensus Problem of Distributed Systems
Stratified Sampling in Pandas
Changing CSS styling with React onClick() Event
How to parse JSON Data into React Table Component ?
How to write comments in ReactJS ?
How to change navigation bar color in Bootstrap ?
How to change Bootstrap datepicker with specific date format ?
How to Show Images on Click using HTML ?
How to pass data into a bootstrap modal?
How to align navbar items to the right in Bootstrap 4 ?