jQuery

jQuery show hide password

In this blog we will learn jQuery show hide password.

1:When Show password checkbox IS NOT CHECKED, the password should be masked.

2: When user click on Show password checkbox IS CHECKED, the password should be in clear text and visible to the user.

One of the ways of achieving this is by changing the type attribute of the password field depending on the checked status of Show password checkbox
1. If the Show password checkbox is CHECKED change the type to text
2. If the Show password checkbox is NOT CHECKED change the type to password

Code:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.checkBoxShowHidePwd').click(function () {
                    $('.inputPassword').attr('type', $('.checkBoxShowHidePwd').is(':checked') ? 'text':'password');
                });
            });
    </script>
    </head>
    <body style="font-family:Arial">
        Password :
    <input type="password" class="inputPassword" />
    <input type="checkbox" class="checkBoxShowHidePwd" />Show password
</body>
</html>

Output:

jquery-show-hide-password

jquery-show-hide-password

Leave a Reply

Your email address will not be published. Required fields are marked *