Home Web Development JavaScript JavaScript Show Hide Password Input With CSS | Show/Hide Pass

JavaScript Show Hide Password Input With CSS | Show/Hide Pass

October 31, 2019

16557

How we can show and hide a password input using JavaScript? Solution: See this JavaScript Show Hide Password Input With CSS, Show/Hide Password.

Previously I have shared many registration forms, but most of those don’t have password show/hide features. Basically, when we sign in or sign up on any social platform then we have to put username and password. Almost all social networks hide passwords by default, and there is a button or checkbox to show our typed password. In major we use <input type="password"> in the password field, this inputs hides characters automatically.

Today you will learn to create a Show/Hide Pass program using HTML CSS JS. Basically, there are 3 password input fields with different password show methods. The first input has a checkbox, the second one has an eye icon, and the third one has a button for showing and hiding password characters.

So, Today I am sharing JavaScript Show Hide Password Input With CSS. There I have used HTML CSS JavaScript for creating this program, there is not any library or framework. If we use jQuery for creating this program, then we have to write only a few lines of codes. But there I have used pure JavaScript, this will be a good practice of JS for you.

If you are thinking now how this show and password input actually is, then see the preview given below.

Preview Of Show/Hide Pass Characters

See this video preview to getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/show-hide-password.mp4?_=1

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

JavaScript Show Hide Password Input With CSS Source Code

Before sharing source code, let’s talk about it. First I have created 3 password input fields using HTML <input type="password"> tag. There are 3 password fields and also I have created 3 different types of elements for showing the password characters. In the first field, I have created a checkbox and a label for showing password. For the second field, I have placed an icon using the font-awesome library. And in the third field, I have put a button for show/hide characters.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. I have placed all three fields by one after one placement. With CSS, I have done a lot of basic stuff like margin, padding, size, etc. There I have used CSS @media query for fitting the container in small screen sizes.

JavaScript handling here the main feature of the program, which is showing and hiding password characters. JS getting all the data using document.getElementById command storing the values in variables (info). There I have used JavaScript if & else statement in on click action. Its changing the input type, class name, and text dynamically.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Show/Hide Password | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
  <link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">
  <div class="title">Show/Hide Password</div>

  <div class="first">
   <input type="password" id="pass">
     <div class="group1">
       <input type="checkbox" id="chk">
       <label id="showhide" class="label">Show Password</label>
     </div>
  </div>

  <div class="second">
   <input class="active" type="password" id="pass2">
   <div class="group2">
    <i id="icon" class="fa fa-eye-slash"></i>
   </div>
  </div>

  <div class="third">
   <input class="active" type="password" id="pass3">
   <div class="group3">
    <button id="btn" class="btn">Show</button>
   </div>
  </div>
</div>

<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Show/Hide Password | Webdevtrick.com</title>

</head>

<body>

<div class="title">Show/Hide Password</div>

<label id="showhide" class="label">Show Password</label>

</div>

</div>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}
body {
	background: #EEE
}
.container {
	width: 400px;
	height: 470px;
	margin: 30px auto 0;
	padding-top: 50px;
	background: #1da1f2;
	border-radius: 5px;
	border: 1px solid #c5c4c4;
	color: #fff
}
.container>div {
	width: 100%;
	height: 25%;
	text-align: center
}
.container .title {
	display: block;
	font-size: 20px;
	font-family: sans-serif;
	height: 30px;
	padding-bottom: 80px;
}
.container>div input[type='password'],
input[type='text'] {
	width: 65%;
	height: 45px;
	background: #7ccdff;
	margin: 10px auto 0;
	padding: 5px 40px 5px 10px;
	display: block;
	font-size: 22px;
	font-family: sans-serif;
	border: 1px solid #2FB57D;
	outline: nfirst;
	border-radius: 3px;
	color: #fff
}
.container>div .group1 {
	display: block;
	height: 40px;
	text-align: left;
	padding-left: 70px;
	padding-top: 10px;
	font: 17px sans-serif, bold;
	position: relative
}
.container>div .group1 .label {
	position: absolute;
	bottom: 11px;
	left: 88px;
}
.container>div .group1 input[type='checkbox'] {
	width: 16px;
	height: 16px;
	cursor: pointer
}
.container>div .group2 {
	display: block;
	height: 40px;
	text-align: left;
	padding-left: 70px;
	padding-top: 10px;
	font: 22px sans-serif;
	position: relative;
	top: 0;
	left: 0;
}
.container>div .group2>i {
	position: absolute;
	right: 80px;
	bottom: 51px;
	cursor: pointer
}
.container>div .group3 {
	display: block;
	height: 40px;
	text-align: left;
	padding-left: 70px;
	padding-top: 10px;
	font: 20px sans-serif, bold;
	position: relative
}
.container>div .group3 .btn {
	position: absolute;
	right: 75px;
	bottom: 50px;
	width: 40px;
	height: 25px;
	background: #1da1f2;
	border: 1px solid #fff;
	border-radius: 2px;
	font: 12px arial, bold;
	color: #fff;
	cursor: pointer;
	outline: nfirst;
}
.container>div .group3 .btn:hover {
	background: #fff;
	color: #333
}
@media (max-width: 765px) {
    .container {
        width: 95%;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

/* Code By Webdevtrick ( https://webdevtrick.com ) */

* {

margin: 0;

padding: 0;

box-sizing: border-box

}

body {

background: #EEE

}

.container {

width: 400px;

height: 470px;

margin: 30px auto 0;

padding-top: 50px;

background: #1da1f2;

border-radius: 5px;

border: 1px solid #c5c4c4;

color: #fff

}

.container>div {

width: 100%;

height: 25%;

text-align: center

}

.container .title {

display: block;

font-size: 20px;

font-family: sans-serif;

height: 30px;

padding-bottom: 80px;

}

.container>div input[type='password'],

input[type='text'] {

width: 65%;

height: 45px;

background: #7ccdff;

margin: 10px auto 0;

padding: 5px 40px 5px 10px;

display: block;

font-size: 22px;

font-family: sans-serif;

border: 1px solid #2FB57D;

outline: nfirst;

border-radius: 3px;

color: #fff

}

.container>div .group1 {

display: block;

height: 40px;

text-align: left;

padding-left: 70px;

padding-top: 10px;

font: 17px sans-serif, bold;

position: relative

}

.container>div .group1 .label {

position: absolute;

bottom: 11px;

left: 88px;

}

.container>div .group1 input[type='checkbox'] {

width: 16px;

height: 16px;

cursor: pointer

}

.container>div .group2 {

display: block;

height: 40px;

text-align: left;

padding-left: 70px;

padding-top: 10px;

font: 22px sans-serif;

position: relative;

top: 0;

left: 0;

}

.container>div .group2>i {

position: absolute;

right: 80px;

bottom: 51px;

cursor: pointer

}

.container>div .group3 {

display: block;

height: 40px;

text-align: left;

padding-left: 70px;

padding-top: 10px;

font: 20px sans-serif, bold;

position: relative

}

.container>div .group3 .btn {

position: absolute;

right: 75px;

bottom: 50px;

width: 40px;

height: 25px;

background: #1da1f2;

border: 1px solid #fff;

border-radius: 2px;

font: 12px arial, bold;

color: #fff;

cursor: pointer;

outline: nfirst;

}

.container>div .group3 .btn:hover {

background: #fff;

color: #333

}

@media (max-width: 765px) {

.container {

width: 95%;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
// checkbox
  var inputPass = document.getElementById('pass'),
      inputChk  = document.getElementById('chk'),
      label = document.getElementById('showhide');


     inputChk.onclick = function () {

      if(inputChk.checked) {

           inputPass.setAttribute('type', 'text');
           label.textContent = 'Hide Passowrd';
       } else {

           inputPass.setAttribute('type', 'password');
           label.textContent = 'Show Passowrd';
       }
 
     }

// eye
var inputPass2 = document.getElementById('pass2'),
    icon = document.getElementById('icon');

   icon.onclick = function () {

     if(inputPass2.className == 'active') {
        inputPass2.setAttribute('type', 'text');
        icon.className = 'fa fa-eye';
       inputPass2.className = '';

     } else {
        inputPass2.setAttribute('type', 'password');
        icon.className = 'fa fa-eye-slash';
       inputPass2.className = 'active';
    }

   }

//  button

var inputPass3 = document.getElementById('pass3'),
    btn = document.getElementById('btn');

   btn.onclick = function() {

     if(inputPass3.className == 'active') {
        inputPass3.setAttribute('type', 'text');
        btn.textContent = 'Hide';
       inputPass3.className = '';

     } else {
        inputPass3.setAttribute('type', 'password');
        btn.textContent = 'Show';
       inputPass3.className = 'active';
    } 

   }

// Code By Webdevtrick ( https://webdevtrick.com )

// checkbox

var inputPass = document.getElementById('pass'),

inputChk = document.getElementById('chk'),

label = document.getElementById('showhide');

inputChk.onclick = function () {

if(inputChk.checked) {

inputPass.setAttribute('type', 'text');

label.textContent = 'Hide Passowrd';

} else {

inputPass.setAttribute('type', 'password');

label.textContent = 'Show Passowrd';

}

// eye

var inputPass2 = document.getElementById('pass2'),

icon = document.getElementById('icon');

icon.onclick = function () {

if(inputPass2.className == 'active') {

inputPass2.setAttribute('type', 'text');

icon.className = 'fa fa-eye';

inputPass2.className = '';

} else {

inputPass2.setAttribute('type', 'password');

icon.className = 'fa fa-eye-slash';

inputPass2.className = 'active';

}

// button

var inputPass3 = document.getElementById('pass3'),

btn = document.getElementById('btn');

btn.onclick = function() {

if(inputPass3.className == 'active') {

inputPass3.setAttribute('type', 'text');

btn.textContent = 'Hide';

inputPass3.className = '';

} else {

inputPass3.setAttribute('type', 'password');

btn.textContent = 'Show';

inputPass3.className = 'active';

}

That’s It. Now you have successfully created JavaScript Show Hide Password Input With CSS, Show/Hide Pass Characters. If you have any doubt or questions comment down below.