A small yet very helpful feature on any web login page is to be able to see the password you are typing in. Thankfully, it is very easy to implement the feature to show/hide passwords on a login box using JavaScript.
The code below assumes that you have referenced FontAwesome in your file/project to be able to show the eye icons. You can always choose to go with other icons instead of FotnAwesome.
The Password Input Element
<input required="" name="password" type="password" id="password"
class="form-control" placeholder="Password">
<i class="fa fa-eye" aria-hidden="true" id="showHidePassword"
style="position: absolute; font-size:20px; right: 50px;
top: 45%; cursor: pointer;"></i>The JavaScript To Show/Hide Password
const showHidePass = document.getElementById('showHidePassword');
const userPassword = document.getElementById('password');
showHidePass.addEventListener('click', function(e) {
let showHideAttr = userPassword.getAttribute('type');
if (showHideAttr === 'password') {
showHideAttr = 'text';
} else {
showHideAttr = 'password';
}
userPassword.setAttribute('type', showHideAttr);
this.classList.toggle('fa-eye-slash');
});
That’s it!
Pretty simple, isn’t it?
