JavaScript is a powerful programming language that allows web developers to create dynamic and interactive web pages. One of the many useful features of JavaScript is the ability to toggle the visibility of a password field on a webpage. In this post, we will take a closer look at a JavaScript function that can be used to toggle the visibility of a password field, and explain how it can be implemented on a webpage.

Add below javascript file before closing head

<script>
function toggle_password(target){
    var d = document;
    var tag = d.getElementById(target);
    
    var tag2 = d.getElementById("showhide");
    if (tag2.innerHTML == 'Show'){
        tag.setAttribute('type', 'text');   
        tag2.innerHTML = 'Hide';
    } else {
        tag.setAttribute('type', 'password');   
        tag2.innerHTML = 'Show';
    }
}
</script>

Html:

Password : <input type="password" name="usr_pwd" id="pwd0" required/> <a href="#" onclick="toggle_password('pwd0');" id="showhide">Show</a>

The JavaScript function that we will be discussing is called “toggle_password”. It takes a single argument, “target”, which is the id of the password input field. The function works by finding the password input field with the id passed in as the “target” argument, and then toggles the visibility of the password by changing the “type” attribute of the input field.

The function starts by declaring a variable “d” that references the document object. This allows the function to interact with the HTML elements on the page. Next, the function uses the “getElementById” method to find the password input field with the id passed in as the “target” argument, and assigns it to the variable “tag”.

The function then uses an if-else statement to check the innerHTML of the element with id “showhide”. If the innerHTML is “Show”, it means the password is currently hidden, and the function sets the “type” attribute of the “tag” element to “text” (so the password becomes visible), and changes the innerHTML of the element with id “showhide” to “Hide”.

If the innerHTML is not “Show”, it means the password is currently visible, so the function sets the “type” attribute of the “tag” element back to “password” (so the password becomes hidden), and changes the innerHTML of the element with id “showhide” back to “Show”.

In order to use this function on a webpage, it needs to be added to the HTML file before the closing head tag. This way, the function is defined and ready to be called when the page loads. In the HTML, you can see the input field with type “password” and “id” as “pwd0” and an anchor tag with id “showhide” which on click calls the javascript function toggle_password(‘pwd0’) which uses the id ‘pwd0’ as the target variable.

Allowing users to toggle the visibility of their password as they type it in can be helpful for preventing typos or for double-checking the password before submitting it. However, it’s worth noting that this is not a secure way of hiding password, as the password is still visible in the HTML source code and can be accessed by malicious users. A secure way of hiding password is to use server side encryption and hashing before storing it in the database.

In conclusion, toggle password feature is a useful feature that can enhance the user experience on your website. With a little bit of JavaScript, you can easily create a toggle password feature on your website. But be aware that it is not a secure way of hiding password, so you need to use server side encryption and hashing before storing it in the database.