Show hide password using JavaScript

byCodingFlicks -November 27, 2022

0

For security reasons, we need to hide the password for every login form. We can see the password by clicking on the eye icon if we need to see it. This feature is found in every login form on the website. This show and hide password effect has been created using javascript. The video demo is available below. There are many more snippets about our website about HTML, CSS, and javascript. I request you to go to our website homepage and click on the below load more button at the bottom. As a result, you will see the previous snippets published on our website.

I hope you watched the video demo. The password input option that every login form has is the one we’ve designed here. We have specified the height and width of the input field. The CSS `transform` property is used to bring an input element to the center of the viewport. The input has a shadow applied to it and its text is styled as well. A span tag with an awesome icon has also been taken. Initially, this icon will be on display: none state. When the user writes in the input field, the eye icon will appear. The password will be visible when the eye icon is clicked and the icon will be changed to an eye slash icon. When we click on the eye slash icon, the password will become hidden again.

You May Also like:

Show hide password using JavaScript [ Source Code ]:

First, create an HTML and CSS file for this project. You can create a separate js file but for this project, we have put the javascript code underneath the HTML file. Save the code and open it in your browser. If the code is not working then download the code from the below download button provided at the end.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
    <meta charset="UTF-8">
    <title>Show/Hide Password using HTML CSS and JS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
		<input type="password" placeholder="Enter Your Password" required="required">
		<span class="show-btn"><i class="fa fa-eye"></i></span>
	</div>
	
	
	<script>
        const X = document.querySelector("input");
        const Y = document.querySelector("span i");
        Y.onclick = (() => {
            if (X.type === "password") {
                X.type = "text";
                Y.classList.add("icon-area");
            } else {
                X.type = "password";
                Y.classList.remove("icon-area");
            }
        });
    </script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	background: #0259f0;
}
.wrapper {
	position: relative;
	height: 50px;
	width: 500px;
}
.wrapper input {
    background: #fff;
	color: #262626;
	box-shadow: 6px 9px 5px 1px rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	border: none;
	padding-left: 15px;
	font-size: 15px;
	outline: none;	
}
.wrapper input::placeholder {
	font-size: 15px;
	color: #262626;
	opacity: 0.6;
}
.wrapper span {
    font-size: 20px;
	color: #262626;
	cursor: pointer;
	display: none;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);	
}
.wrapper input:valid~span {
	display: block;
}
.wrapper span i.icon-area::before {
	content: "\f070";
}

Hope your code works. Please share our content with all like-minded people. Thank you very much for visiting our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.