Skip to main content

Show and Hide Password using Javascript

Show and Hide Password is a JavaScript project that is currently widely used. This allows you to hide the password or text in an input box.

 Currently, we see such systems in almost all types of social media and website login forms. Even when we turn on the window, we see the Show and Hide Password option in the Password Input Place.

 In this article, we are going to learn how to create a Show and Hide password system using JavaScript programming code. This type of system is used in a variety of login and registration forms. Earlier I designed many types of login forms but did not add the option to hide passwords and show. But in this article, I have shown that.

This type of design is used where passwords are input. When you input the password, it is seen in bullet format. In that place, you will see a small button or icon which, when clicked, will turn the bullet marks into characters.

Video Tutorial of Show and Hide Password

 If you have difficulty understanding then you can watch the video tutorial below. In the video tutorial below you will learn how I made this design very easily using JavaScript code.




Hopefully, the video tutorial above has helped you to know how I made this design. As you can see in the video above, I made a small box on the first web page. 

In that box, I created an input place to input. If you input a password in the input field, it will appear in bullet format. When you click on the icon to the right of that place, those bullet formats will become characters. When you click on that icon again, the passwords will be converted to bullet format again.

See related design:

➧ Login Form With Password Validation
➧ Login & Registration Form using JavaScript
➧ Random Password generator javascript
➧ Popup Contact Form

Show and Hide Password using Javascript [Source Code]

 For your convenience, I have given below the necessary source code. If you want, you can copy those codes and use them in your own project. First of all, you create an HTML and CSS file.

 Be sure to attach your CSS file to the HTML file. In this case, you must add the font awesome CDN link in the head section of your HTML file to implement the icon I used.

Use HTML code to build its structure

The following programming codes are the HTML programming codes that helped build the structure of this design. You copy the following HTML code and then paste it into the body tag (<body> </body>) of your HTML file.

HTML Code

 <!DOCTYPE html>
<!-- Design by rajtemplate.com -->
<html>
<head>
<!--font awesome icon cdn link-->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
 
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="container">
  
  <div class="second">
   <input class="active" type="password" id="pass">
   <div class="group2">
    <i id="icon" class="fa fa-eye-slash"></i>
   </div>
  </div>
  
</div>
<script src="javascript.js"></script>
</body>
</html>



Design it using CSS code

Now let's design the HTML code added above using CSS code. For this, you copy the following CSS codes then paste them into your CSS file. If you do not create a CSS file, you can paste these codes into the HTML file using the style tag.


CSS Code

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box
}

body {
 background: #1da1f2;  /* webpage background color */
}

.container {
 width: 340px;    /* box width */
 height: 90px;
 background: #fff;  /* box background color */
 border-radius: 5px;
 margin: 30px auto 0;
 padding-top: 22px;
 border: 1px solid #c5c4c4;
}

.container>div {
 width: 100%;
 height: 25%;
 text-align: center
}
 
.container>div input[type='password'],
input[type='text'] {
 width: 88%;
 height: 45px;   /* input place height */
 background: white;
 font-family: sans-serif;
 border: 2px solid #1da1f2;  /* input border */
 outline: nfirst;
 border-radius: 3px;
 margin: 1px auto 0;
 padding: 5px 40px 5px 10px;
 display: block;
 font-size: 22px;
 color: black;
}
 
.container>div .group2 {
 padding-left: 70px;
 padding-top: 10px;
 font: 22px sans-serif;
 position: relative;
 display: block;
 height: 40px;
 text-align: left;
 top: 0;
 left: 0;
}

.container>div .group2>i {
 position: absolute;
 right: 32px;  /* icon position */
 bottom: 51px;
 cursor: pointer

}


Activate it using JavaScript code

JavaScript plays a vital role in implementing this program (Show and Hide Password using Javascript). In this case, very little JavaScript is used. You copy the JavaScript code below and paste it into your HTML file using the script tag (<script> </script>).


JavaScript Code

 

var inputPass = document.getElementById('pass'),
    icon = document.getElementById('icon');
 
   icon.onclick = function () {
 
     if(inputPass.className == 'active') {
        inputPass.setAttribute('type', 'text');
        icon.className = 'fa fa-eye';
       inputPass.className = '';
 
     } else {
        inputPass.setAttribute('type', 'password');
        icon.className = 'fa fa-eye-slash';
       inputPass.className = 'active';
    }
 
   }
  


 I hope you have made this Show and Hide Password system. If you want to know how it works then check out the demo below 👇👇👇


See the Pen by Raj Template (@RajTemplate) on CodePen.

Tags

Comments

Post a Comment

Ask Me Anything ........

Popular Posts

Animated Progress Bar using Only HTML and CSS

Animated progress bar is mainly used in various business and personal web sites. css progress bar helps to organize your knowledge in a beautiful way. In this article, I am going to show you how to create an animated progress bar using only HTML and CSS code. I have made many other types of Progress Bar before but in that case, I have used JavaScript.  I have not used any JavaScript or external JavaScript library for this design. I created this Animated Progress Bar design using Pure HTML and CSS code. Skill bars are used on various websites to streamline the amount of experience, education, etc. with the help of animations. First of all, I have given the background-color: # 30336b of a web page. Then I made a small box here. I used four CSS Progress Bar in that box. The value of this bar will be zero when opening the page then gradually it will reach the pre-determined meaning. Video Tutorial of Pure CSS Progress Bar If you want to know how to make it better then you can watc
Post a Comment
Read more

Sidebar Menu Using Only HTML and CSS

This article shows you how to create sidebar menus using HTML and CSS code only. I have previously created many types of sidebars and navigation menubars using only HTML and CSS code so you can see those designs if you want.  Side Menubar A popular web element is currently used in the sidebar along with menubars on various websites. Undoubtedly the side menu bar is much more attractive and for this, the quality and beauty of the website are greatly enhanced. Under normal circumstances, I have completely hidden the menu bar on the web page.  There is a menu button that can be clicked to view the entire menu bar. There is also a cancel button which, when clicked, will completely hide the sidebar. In the sidebar, I have added links to various menu items, profile names, profile images, social media platforms.  First I gave the profile image and below that, I gave the profile name. Then I added some menu items here and added icons to each menu item. Then I created the buttons of fo
Post a Comment
Read more

Popup Login Form using Only HTML & CSS

In this article, I am going to show you how to create a pop-up login form using only HTML and CSS code. I have previously designed many more types of pop-up login forms , but in that case, I have used JavaScript. I did not use any JavaScript code in this design, only pure HTML and CSS code. In the case of this type of design, the complete login form is hidden. Instead, a button appears on which the complete login form can be viewed by clicking on it. One type of design is much more attractive than the usual login design and enhances the quality of the website a lot.  Like the normal form, it has everything here, namely the place to input the email ID and password and a login button. First I made a small button on the web page. Clicking on that button will show the complete login form.  There is a small cancel button in the login form which if clicked will hide the complete login form again. Video Tutorial of Popup Login Form If you want to know the complete step-by-step how I made
Post a Comment
Read more