Show Hide Password using JavaScript

In this blog, we will share a snippet about Showing and Hide passwords using HTML CSS and Javascript. Before you get the source code, watch the video tutorial below. This video will help you understand the code. Videos about front-end development can be found on our YouTube Channel. If you enjoy what you see you can subscribe to the channel.

I hope you've watched the video and understood the basics. We'll learn how to hide and show a password with an eye icon. This feature is very useful and should be used on your login form for privacy. There are two steps in this process and they are easy to follow. The login form needs to be created in the first place. Then we will use some javascript code to get the show and hide the password effect. When the user clicks on the eye icon, the password will be visible in front of the viewer. When we will click on the eye slash icon the password will be hidden from the viewer.

You May Also Like:

Show Hide Password using JavaScript [ Source Code ]:

The first thing you need to do is make two files. There are two files, one is an HTML and the other is a CSS. Attach the external CSS file to the HTML file. The snippet is not Jquery depended, so we don't need to add jquery. We have inserted the javascript code underneath the HTML file but you can create a separate js file to put the code there. You can take the code from the box below and paste it into your file. The project can be opened in the browser if you want to check it out. If the code isn't working, then the source code needs to be downloaded from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Show/Hide Password using javascript</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<input class="active" id="input-area" placeholder="Enter Your Password ..." type="password"> 
		<span class="icon-area"><i class="fa fa-eye-slash" id="icon"></i></span>
	</div>
	
	<script>
	       var x = document.getElementById('input-area');
	       var y = document.getElementById('icon');


	       y.onclick = function() {
	           if(x.className == 'active') {

	               x.setAttribute('type', 'text');
	               icon.className = 'fa fa-eye';
	               x.className = '';
	           }else{
	               x.setAttribute('type', 'password');
	               icon.className = 'fa fa-eye-slash';
	               x.className = 'active';
	           }
	       }
	</script>
</body>
</html>

ADD CSS:

body {
	background: blueviolet;
	display: grid;
	place-items: center;
	height: 100vh;
}
.wrapper {
	height: 50px;
	width: 350px;
	box-shadow: 0 5px 20px -5px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	position: relative;
}
input {
	width: 100%;
	height: 100%;
	border: none;
	padding-left: 15px;
	font-size: 18px;
	border-radius: 5px;
}
.icon-area {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
}
.icon-area i {
	font-size: 25px;
}

I hope you have implemented the code correctly. There are lots of snippets on the website. Clicking on the "load more" button will allow you to go to those. If you enjoy the articles and snippets on this website, please share them with other people. Thank you for visiting our website, we're glad you did.

DOWNLOAD CODE

Show Hide Password using JavaScript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Show Hide Password using JavaScript

Show Hide Password using JavaScript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form