Show Eye icon on password input field
The following shows the HTML code of the page:
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<body>
<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 src="js/app.js"></script>
</body>
</html>Code language: HTML, XML (xml)The HTML page contains an input element with the type password and an <i> element with the CSS classes provided by Bootstrap.
The Bootstrap 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 app.js file:
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)
Comments
Post a Comment