Sumit Dey
Sarkar
12 Nov 2022
JavaScriptIn this tutorial we will learn how to show and hide Password using eye icon in HTML and JavaScript.
Actually sometime we need to see password to determined password is right or wrong. So, here we use pure javascipt to toggle password visibility in forms using eye icon.
Let's see a example in which we can show/hide Password using JavaScript.
How to show and hide Password using eye icon in HTML and JavaScript?
Step 1 - Add below HTML
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>How to show and hide Password using eye icon in HTML and JavaScript?</title>
</head>
<body>
<form action="javascript:void(0)">
<div class="form-div">
<div class="input-div">
<input type="password" class="form-control" placeholder="New Password">
<div class="auth-left-icon">
<img src="https://www.teknowize.com/attachments/file_1668193979.svg" alt="Mobile">
</div>
<img src="https://www.teknowize.com/attachments/file_1668193813.svg" alt="Mobile" class="inputEyeIcon">
</div>
<div class="buttonDiv"> <button type="submit" class="submitButton">Log in</button></div>
</div>
</form>
</body>
</html>
Step 2 - Add below CSS
body {
display: flex;
justify-content: center;
align-items: center;
}
.form-div {
position: relative;
width: 100%;
}
.input-div {
position: relative;
max-width: 370px;
margin: 0 auto;
margin-top: 1rem;
}
.input-div input {
width: 100%;
border: 1px solid #B8B8B8;
border-radius: 5px;
height: 50px;
padding: 0 2.5rem 0 3.5rem;
font-size: 18px;
color: #333333;
}
.input-div input::placeholder {
font-size: 18px;
color: #B0B0B0;
}
.input-div .auth-left-icon {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-right: 1px solid #B8B8B8;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.inputEyeIcon {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
cursor: pointer;
}
.buttonDiv {
display: flex;
justify-content: center;
}
.form-div .submitButton {
width: 250px;
height: 50px;
background: #000aff;
border-radius: 8px;
font-weight: 600;
font-size: 20px;
text-align: center;
color: #FFFFFF;
margin-top: 25px;
border: 1.5px solid #004ff8;
cursor: pointer;
}
.form-div .submitButton:hover {
background: #ffffff;
color: #000aff;
}
Step 3 - Add below JavaScript
// show hide password field
var clearAllInputs = document.querySelectorAll('.inputEyeIcon');
clearAllInputs.forEach(function (clearEachInputs) {
clearEachInputs.addEventListener('click', function (e) {
var inputAll = this.parentElement.querySelector('input');
if (inputAll.type === "password") {
inputAll.type = "text";
this.src = "https://www.teknowize.com/attachments/file_1668193773.svg";
} else {
inputAll.type = "password";
this.src = "https://www.teknowize.com/attachments/file_1668193813.svg";
}
})
})
Now combine all the HTML, CSS and JS code together to show and hide password when click on eye icon using JavaScript.
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>How to add modal popup in PHP using jQuery</title>
<style type="text/css">
body {
display: flex;
justify-content: center;
align-items: center;
}
.form-div {
position: relative;
width: 100%;
}
.input-div {
position: relative;
max-width: 370px;
margin: 0 auto;
margin-top: 1rem;
}
.input-div input {
width: 100%;
border: 1px solid #B8B8B8;
border-radius: 5px;
height: 50px;
padding: 0 2.5rem 0 3.5rem;
font-size: 18px;
color: #333333;
}
.input-div input::placeholder {
font-size: 18px;
color: #B0B0B0;
}
.input-div .auth-left-icon {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-right: 1px solid #B8B8B8;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.inputEyeIcon {
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
cursor: pointer;
}
.buttonDiv {
display: flex;
justify-content: center;
}
.form-div .submitButton {
width: 250px;
height: 50px;
background: #000aff;
border-radius: 8px;
font-weight: 600;
font-size: 20px;
text-align: center;
color: #FFFFFF;
margin-top: 25px;
border: 1.5px solid #004ff8;
cursor: pointer;
}
.form-div .submitButton:hover {
background: #ffffff;
color: #000aff;
}
</style>
</head>
<body>
<form action="javascript:void(0)">
<div class="form-div">
<div class="input-div">
<input type="password" class="form-control" placeholder="New Password">
<div class="auth-left-icon">
<img src="https://www.teknowize.com/attachments/file_1668193979.svg" alt="Mobile">
</div>
<img src="https://www.teknowize.com/attachments/file_1668193813.svg" alt="Mobile" class="inputEyeIcon">
</div>
<div class="buttonDiv"> <button type="submit" class="submitButton">Log in</button></div>
</div>
</form>
<script type="text/javascript">
// show hide password field
var clearAllInputs = document.querySelectorAll('.inputEyeIcon');
clearAllInputs.forEach(function (clearEachInputs) {
clearEachInputs.addEventListener('click', function (e) {
var inputAll = this.parentElement.querySelector('input');
if (inputAll.type === "password") {
inputAll.type = "text";
this.src = "https://www.teknowize.com/attachments/file_1668193773.svg";
} else {
inputAll.type = "password";
this.src = "https://www.teknowize.com/attachments/file_1668193813.svg";
}
})
})
</script>
</body>
</html>
Output
view output here- https://www.teknowize.com/snipits/login-form/show-and-hide-password-using-javascript
