How to Toggle Password Visibility using hideShowPassword Plugin

What Will I Learn?

You will learn how to select HTML element using jQuery
You will learn click() event in jQuery
You will learn about hideshowpassword plugin

Requirements

Basic knowledges about HTML
Basic knowledges about jQuery
You have to install or host the jQuery file, You can add jQuery CDN if you don't want to install or host it
You have to install or host the about hideshowpassword plugin, You can add jQuery CDN if you don't want to install or host it. You can get it on github : https://github.com/cloudfour/hideShowPassword

Difficulty

Basic

Tutorial Contents

hideShowPassword is a jQuery plugin to Toggle Password Visibility . To use this plugin we need to include the jQuery because this plugin is the part of jQuery. For more detail let's follow the steps bellow:

Open your Text editor
Create new file save as pwd.html
Add the HTML element as usual.

<html>
<head>
<title>Password visibility</title>
</head>
<body>
</body>
</html>

Create a simple password input

Password: <input type="password"  id="pwd">

Create a checkbox to show and hide the password

<input type="checkbox" id="cek">Show Password

As we know, to use jQuery we need to install or host it. Or we can also add jQuery CDN if we don't want to install or host it. we also have many choices CDN that we can use, either Google CDN or Microsoft CDN. For more Detail you can visit jquery official web. In this tutorial I use Google CDN. Add the CDN in <head> element.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Include the plugin after you've included jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/hideshowpassword/2.0.8/hideShowPassword.min.js"></script>

To write the jQuery Script we should open <script> tag. You can put it in element or in <body> element.

<script></script>

Before add more event in jQuery. There is an event that we should add for the first. It is ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event.

$(document).ready(function(){
});

select the checkbox by id then add then add the click event function

$("#cek").click(function(){
});

To hide and show password with this plugin you can use togglePassword() method. Select the password input and add the togglePassword() method.

$("#pwd").togglePassword();

Save and run the file
Try to enter the password
Try to click the checkbox
FINISH, For the full code you can copy bellow :

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hideshowpassword/2.0.8/hideShowPassword.min.js"></script>
    <title>Password visibility</title>
</head>
<body>
    Password: <input type="password" id="pwd">
    <input type="checkbox" id="cek">Show Password
    <script>
        $(document).ready(function(){
            $("#cek").click(function(){  
                $("#pwd").togglePassword();
            });
        });
    </script>  
</body>
</html>

LIVE DEMO

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Sort Order:

Trending

[-]