Hello friends how are you guys and I hope you are doing well too, and you will like this article of mine and this video of mine too. It is also called toggle password visibility and hide and show password field text in JavaScript.
As you guys can see a lot of my videos are on this i.e. Javascript and Jquery, so you can also watch it so that you can understand better. You must have seen a feature in many of your websites, some people add this feature and some people don’t. The toggle password visibility feature is required when you create your account on a website and when you create a password and when you change your password. for user experience.
I have given code in the fiddle file as below, so the app can see it and copy it too, you will need 3 files to copy. First index.html second style.css and third script.js
You might like this too
Make Spinning Wheel Only CSS, JAVASCRIPT | Simple Spinning Wheel Game Decide a Random Numbers
Responsive Navigation Menu Bar using HTML CSS and JAVASCRIPT | CSS Media Query | Responsive Navbar
CSS Hover Effect | Image hover effect using only HTML & CSS | Scale zoom on image hover in css
Creative portfolio website with Animation using HTML, CSS, JQUERY
Toggle password visibility(show hide password field) in javascript jsfiddle code
index.html In this file, I have created a form and inside it, I have added an input text field and input password field and icon. icon so that if someone clicks on the icon the input type password field value will change to text. You can copy this HTML code in your Index.html file.
style.css This file contains the code for the complete styling of the form. As input field is shown hide icon and I have kept password hide icon default hidden because we have to show only password show icon so now. By copying this code you can place it in your style.css file.
script.js This file contains the entire JavaScript code. With the help of which we can convert password to text and text to password. First of all, I have taken 3 variables in it in which I have stored the calls of password and I have stored the icon. The second thing that comes after that is that I have taken 2 onclick functions in which I have targeted show class in one function and hide class in another function.
In show class, I have replaced the attribute of input type password with input type text. And the show which was the icon of Hiding has been changed. When you click on the show icon, you will see the password in the text, and the hide icon will come in place of the show icon.
In the hide class, I replaced the input type password in the text which was shown again in the password. And the one who shows the show has replaced the icon of hiding. When you click on the hide icon, the show icon will be replaced.
If I talk about toggle password visibility plugin(also called hide show password), then it will probably have very few plugins because this kind of plugin is not needed much because the functionality that is there will be done in a few minutes with the help of jquery and javascript then any plugin for this There is no need to use it. If you use plugins for small things, then your Google score / SEO can make a big difference and your request will increase more, then it can give a big blow to your SEO. So I would recommend that you do it with simple JavaScript instead of a plugin. Nevertheless, I have given a link to a couple of plugins below, if you want to use them, you can do it.
Above I have given the code in jsfiddle, you can see it and if you don’t understand then I have also done it through the video I have also given the link of it and you can visit my LearnDesign youtube channel to see more useful videos I have made videos like web design, front end development, problem solving and CSS/jQuery animations. if you have any requests then you can ask me by commenting. I will try to answer it. Thank you for visiting this article and for visiting this website, have a nice day.
