This tutorial demonstrates the functionality of how to toggle password field visibility. Show and Hide Password Field Text with jQuery and JavaScript.


index.html

<html>
    <head>
        <title>passtoggle.html</title>
        <script>
            function toggePassword() {
                var upass = document.getElementById('upass');
                var toggleBtn = document.getElementById('toggleBtn');
                if (upass.type == "password") {
                    upass.type = "text";
                    toggleBtn.value = "Hide password";
                } else {
                    upass.type = "Password";
                    toggleBtn.value = "Show the password";
                }
            }

        </script>
    </head>
    <body>
      
        Password:<br><input type="password"id="upass"name="password">
        <input type ="button"id="toggleBtn"value="Show the password"onclick="toggePassword()">

    </body>
</html>

output:



Download source code

Are you facing problems in understanding this article? download source code now