javascript show hide password

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.

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.

You May Also Like:

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.

style.css

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

function.js

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

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.

Thanks For Visiting, Keep Visiting.