Show/Hide Password Field onClick of Button using Javascript

Category: Text & Input | January 12, 2019
Author: botflux
Official Page: Go to Website
Last Update:August 1, 2023
License:MIT

Are you looking for a solution to create a password input type field with an eye Icon which allows the user to show or hide the password on-click? If so then this is the right tutorial for you.

By using a small tiny plugin show-password.js, I am going to create the functionality of show/hide password characters On Click.

Normally you find such kind of functions on Android mobile devices but you can also implement on your website, especially on login or registration page.

Implement Show/Hide Password Field

The first simple thing you need to do is to import the main script file into the header. Have a look, how you can do that.

<script src="ShowPassword.js"></script>

The next step is also pretty much simple and easy to do. You need to Add the data-input-password attribute to your password field.

<input type="password" data-input-password="example">

To create an eye icon or a toggle button, you need to define the span tag and add the data-show-password. In our case, we have a simple toggle button but you can use eye icon by customizing the HTML and CSS code.

<span data-show-password="example">Toggle</span>

The last and final thing to Initialize the library and we’re done.

new ShowPasswordManager()

That’s It. Simply download the plugin and implement on your website. If you having any issue with implementation, you can see our demo and copy the source code.