The password reveal plug-in
Sometimes, you may need revealing the characters entered by the user in a password field. For example, your account creation form has a password field along with a confirm password field. You want your visitors seeing the characters entered in both fields for confirming that they are matching each other.
Although, there are other solutions (server or client side) where a script may check that both fields are the same but there may be other uses for revealing the passwords as well.
In this tutorial, I am going to show you such a jQuery plug-in that will reveal the password characters entered in the input type = “password”. See the demos and how you may use this in your web forms in the following section.
A demo of showing password
In the demo page, you can see two text fields are displayed. One is a normal input type password without using the plug-in. The other is assigned the plug-in class. As you click the small icon towards the right corner of the password field (an eye), it will display the password. The password will be visible as long as you press the icon. Have a look:
See online demo and code
Follow these steps for setting up this plug-in.
Step 1:
Include the inputShowPwd and style CSS files in the <head> section of web page. You may get these files by downloading the package here.
Also, include the jQuery and plug-in JS files in the <head> section.
Step 2:
Create an input type password field. There, you may use a <span> tag for displaying “eye” icon:
The icon image is specified in the CSS file of the plug-in. If you want to change it or design your own, you may follow the path and replace the icon with your custom icon.
You can see an additional text field just above the password field.
Step 3:
Initiate the script in jQuery code section:
That’s it!
A demo of using in a form
In this example, I am using the reveal password field along with other fields like Name, Email, address etc. The purpose is to show you how you may set up for the real form. This is just a raw form with an additional CSS class.
See online demo and code
Similarly, you may use this plug-in in any forms including Bootstrap based forms.
Source : https://www.jquery-az.com/jquery-password-reveal-plug-in-for-input-type-password/
Demo : https://www.jquery-az.com/jquery/demo.php?ex=56.0_1
No comments:
Post a Comment