Show hide password using JavaScript

 

show hide password

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:




ADD CSS:




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

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

Post a Comment

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

Post a Comment (0)

Previous Post Next Post