How to toggle password visibility in forms using Bootstrap-icons ?
Last Updated :
05 May, 2023
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...