How to Toggle Password Visibility
Summary: in this tutorial, you will learn how to toggle the visibility of a password input by using plain JavaScript.
A password field provides a way for users to securely input a password by showing the * character instead of the actual characters.
However, it is likely that some users will type the wrong password. To help them see the password that they’re currently entering, you can add a button that allows them to toggle the password visibility.
To make the password visible, you follow these steps:
- First, create an
<input>element with the type ofpasswordand an icon that allows users to click it to toggle the visibility of the password. - Second, bind an event handler to the click event of the icon. If the icon is clicked, toggle the
typeattribute of the password field betweentextandpassword. The input with the typetextwill show the actual password. - Third, change the icon to make it more user-friendly. This step is optional.
To make it easy, we’ll use two icons from the Bootstrap icon for toggling the visibility of the password.
The following shows the HTML code of the page:
<html lang="en"><meta charset=“UTF-8” />
<meta name=“viewport” content=“width=device-width, initial-scale=1.0” />
<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=“css/style.css” />
</head>
<div class=“container”>
<h1>Sign In</h1>
<form method=“post”>
<p>
<label for=“username”>Username:</label>
<input type=“text” name=“username” id=“username”>
</p>
<p>
<label for=“password”>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=“submit”>Log In</button>
</form>
</div>
<script>
const togglePassword = document.querySelector(“#togglePassword”);
const password = document.querySelector(“#password”);
// toggle the type attribute
const type = password.getAttribute(“type”) === “password” ? “text” : “password”;
password.setAttribute(“type”, type);
this.classList.toggle(“bi-eye”);
});
const form = document.querySelector(“form”);
form.addEventListener(‘submit’, function (e) {
e.preventDefault();
});
</script>
</body>
Code language: HTML, XML (xml)
The HTML page has an input element with the type password and an <i> element with the CSS classes provided by Bootstrap CSS.
The Bootstrap CSS allows you to use the class bi-eye of the <i> element to show the eye icon. To change the icon from eye to eye slash, you just need to change the class of the <i> element to bi-eye-slash
To place the icon inside the password input, you can use the negative margin for the <i> element as follows:
form i {
margin-left: -30px;
cursor: pointer;
}Code language: CSS (css)
The rest of the CSS is straightforward.
In the JavaScript:
First, select the toggle password icon and the password input field using the querySelector() method:
const togglePassword = document.querySelector('#togglePassword');
const password = document.querySelector('#password');Code language: JavaScript (javascript)
Then, attach an event listener to the togglePassword icon and toggle the type attribute of the password field as well as the class of the icon:
togglePassword.addEventListener('click', function (e) {
// toggle the type attribute
const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
password.setAttribute('type', type);
// toggle the eye / eye slash icon
this.classList.toggle('bi-eye');
});Code language: JavaScript (javascript)