How to show and hide password using JavaScript
- Tech Area
- June 7, 2024
In this tutorial, We will learn how to show hide password using JavaScript. We will add the toggle password feature using JavaScript. While filling up a password, and want to see what we have typed till now. To see that, there is a show/hide toggle image which makes the characters visible.
Files used in this tutorial:
1- index.php (password field with show-hide toggle image)
2- style.css
This screenshot shows the input field password with show-hide toggle image.
Below are the step by step process of how to use show hide toggle image using JavaScript.
Step 1: Create index.php
In this step, create a new file index.php. This is the main file used for input field password and show hide toogle image using JavaScript.
index.php
<html>
<head>
<title>Show-Hide Password</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box">
<input type="password" name="pwd" id="pwd" placeholder="Enter Password">
<img src="not-visible.png" class="eye" id="eye" onclick="toggle()">
</div>
</body>
</html>
<script type="text/javascript">
function toggle()
{
let eye = document.getElementById("eye");
let pwd = document.getElementById("pwd");
if(pwd.type== 'password')
{
pwd.type = "text";
eye.src = "visible.png";
}
else
{
pwd.type = "password";
eye.src = "not-visible.png";
}
}
</script>Step 2: Create style.css
.box
{
width:100%;
max-width:600px;
background-color:#f9f9f9;
border:1px solid #ccc;
border-radius:5px;
padding:16px;
margin:250 auto;
display: flex;
}
.box input
{
width: 100%;
outline:0;
border: 0;
padding: 10px 0;
font-size: 22px;
background-color:#f9f9f9;
}
.eye
{
height: 46px;
cursor: pointer;
}Download Source Code
Join 10,000+ subscriber