- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Toggle Password Visibility in JavaScript?
In this article, we are going to hide the password with ****. The password can be shown by toggling its visibility by using a button. We will be creating a JavaScript function that will display the hidden password when the toggle button is clicked.
Approach
On clicking the toggle button the JavaScript function to display the password will be rendered.
This will change the CSS property applied on the HTML input tag that will display the password.
We can toggle again to hide the password again.
Example
In the below example, we are toggling the visibility of the password using the checkboxcheckbox. On clicking the checkbox button the password will be displayed else it will be hidden.
# index.html
<!DOCTYPE html> <html> <head> <title> Toggle Password Visibility </title> </head> <body> <h2 style="color:green"> Welcome To Tutorials Point </h2> <div class="container"> <h3 class="mt-5 mb-5 text-center">Toggle password visibility</h3> <div class="form-group"> <label for="ipnPassword">Password</label> <div class="input-group mb-3"> <input type="password" class="form-control" id="ipnPassword"/> <div class="input-group-append"> <input type="checkbox" class="btn btn-outline-secondary" type="button" id="btnPassword">Show Password </button> </div> </div> </div> </div> </body> <script> // step 1 const ipnElement = document.querySelector('#ipnPassword') const btnElement = document.querySelector('#btnPassword') // step 2 btnElement.addEventListener('click', function() { // step 3 const currentType = ipnElement.getAttribute('type') // step 4 ipnElement.setAttribute('type',currentType === 'password' ? 'text' : 'password') }) </script> </html>
Output
- Related Articles
- How to toggle between password visibility with JavaScript?
- How to toggle a div visibility using jQuery?
- How to toggle text with JavaScript?
- How to toggle a boolean using JavaScript?
- How to create a password generator - JavaScript?
- How to toggle between hiding and showing an element with JavaScript?
- How to toggle menu items in JavaFX?
- How to toggle between a like/dislike button with CSS and JavaScript?
- How to toggle between two classes in jQuery?
- How to create a Toggle Button in JavaFX?
- How to verify the password entered in the JavaFX password field?
- How to create a password validation form with CSS and JavaScript?
- How to create a Tkinter toggle button?
- Validating email and password - JavaScript
- Validating a password using JavaScript

Advertisements