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. Now 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 toggling is used.
Steps to Toggle the Password Visibility:
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.
Eg:
<!DOCTYPE html>
<html>
<head>
<title>JS Toggle Password Visibility</title>
</head>
Enter Password: <input type="password" value="javatpoint" 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>