How To Use Toggle Password Visibility Example In JavaScript?

Nov 11, 2021 . Admin

Hello Friends,

Now let's see example of how to use toggle password visibility example. We will check how to use toggle password visibility. This is a short guide on toggle password visibility in javascript. Let's get started with how to toggle password visibility in javascript.

Here i will give you many example how to use toggle password visibility using javascript.

Example : 1

<!DOCTYPE html>  
<html>  
    <head>  
        <title>How To Use Toggle Password Visibility Example In JavaScript? - MyWebtuts.com</title>  
    </head>  
    <body>
        <h3>How To Use Toggle Password Visibility Example In JavaScript? - MyWebtuts.com</h3>  
        Enter Password : <input type="password" value="MyWebtuts" id="a_pwd">
        <input type="checkbox" onclick="toggleVisibility()"/>Show Password</br>  

        <script>  
            function toggleVisibility(){  
                var pwd = document.getElementById("a_pwd");  
                if (pwd.type === "password"){  
                    pwd.type = "text";  
                } else{  
                    pwd.type = "password";  
                }  
            }  
        </script>  
    </body>  
</html>

Output :

MyWebtuts

Example : 2

<!DOCTYPE html>  
<html>  
    <head>  
        <title>How To Use Toggle Password Visibility Example In JavaScript? - MyWebtuts.com</title>  
    </head>  
    <body>
        <h3>How To Use Toggle Password Visibility Example In JavaScript? - MyWebtuts.com</h3>  
        Enter the Password : <input type="password" value="MyWebtuts.com" id="a1">
        <input type="checkbox" onclick="tVisibility()"/>Show Password</br>  

        <script>  
            function tVisibility(){  
                var pwd = document.getElementById("a1");  
                if (pwd.type === "password"){  
                    pwd.type = "text";  
                } else{  
                    pwd.type = "password";  
                }  
            }  
        </script>  
    </body>  
</html>

Output :