JavaScript Tutorial
JavaScript Basics
JavaScript Objects
- js-object
- js-array
- js-string
- js-date
- js-math
- js-number
- js-boolean
JavaScript BOM
JavaScript DOM
JavaScript Validation
- js-form-validation
- js-email-validation
JavaScript OOPs
JavaScript Cookies
JavaScript Events
Exception Handling
- js-exception-handling
- javascript-try-catch
JavaScript Misc
JavaScript Advance
Differences
- jquery-vs-javascript
- javascript-vs-php
Questions
Interview Questions
- javascript-i/q

How to Toggle Password Visibility in JavaScript

If you know how to set a password in a JavaScript code, it becomes easy to understand how we can toggle the visibility of the password.

Here, in this section, we will learn how we can toggle the visibility of the password in JavaScript by implementing an example to do so.

When we use a password field in the code, it might be well known that it is visible as '*', which is a security input for the user described password code. So, when the user inputs the password in the password field, it gets input in the form of '*' characters hiding the actual characters behind it. But sometimes, it does happen that the admin sometimes mistypes the password and assume that the password is correctly input. But after the unsuccessful login attempt, the admin wants to see the password string so that he can understand the mistake he is making and won't repeat it. For knowing the actual password string, he will move to the database to see the password. For such a reason, the concept of toggling the password visibility can help the admin see whether the admin has correctly entered the password or not there only, and there will be no need to move to the database and search for the password. We need to add a button that will let the user toggle the visibility of the password.

Steps to Toggle the Password Visibility

In order to toggle the visibility of the password, one needs to follow the below-described steps:

Step 1: Create an input element with a password field that will take input in the password form.

Step 2: Add an icon within the input element on which the user can click to toggle the visibility of the password.

Step 3: Attach an event handler on making a click on the icon where if the user clicks on the icon, it should toggle the type attribute of the password field between text and password. Thus, when the type is changed between password to text, the actual text entered by the user will be visible.

Step 4: So, when the user unclicks the icon, the actual password text again gets toggled in the password form.

The user needs to include these described steps in the code and can gain the toggling of password visibility.

Now, let's see an example code that will help us to better understand the steps.

Toggling the Password Visibility in JavaScript

The below example code shows the implementation of the steps required to toggle the visibility of the password:

     <!DOCTYPE html>
<html>
<head>
<title>JS Toggle Password Visibility</title>
</head>
Enter Password: <input type="password" value="w3cschoool" id="pswrd">
<input type="checkbox" onclick="toggleVisibility()"/>Show Password</br>
<body>
<script>
function toggleVisibility() {
  var getPasword = document.getElementById("pswrd");
  if (getPasword.type === "password") {
    getPasword.type = "text";
  } else {
    getPasword.type = "password";
  }
}
</script>
</body>
</html>

    

The output of the above code is shown below:

How to Toggle Password Visibility in JavaScript

In the code:

The above code is a combination of JavaScript and HTML.
We have created an input element for entering password value and given a password value.
Next, we have created a checkbox on which we have invoked the JavaScript function.
When the user clicks on the checkbox, the password value becomes visible.
When the user unclicks the checkbox, the actual password again gets hidden.

Therefore, using this method, we can toggle the visibility of the password.

Next TopicRemoving Duplicate From Arrays

← prev next →