JQuery How To Show And Hide Password To Confirm It ' Convert Type ' ( Video Tutorial )

[aymenz]

Image Source

What Will I Learn?

I will learn how to show and hide password to confirm it by JQuery .

• I used the click event with a function .
• The toggle class to add and remove the active class in the button
• I used also the previous and attribute ' prev , text , attr ' propriety to get the previous element and change the text and attribute of CSS .

Requirements

• Basic knowledge of JavaScript language .
• Knowledge of JQuery .
• Has the min jquery file .
• Has an editor text .

Difficulty

• Basic

Description

In this video I will show you how to show and hide password. This idea came to me to confirm your password that you have written if you wrote something wrong firstly. I created the input with the type password and a button ' Show Password ' to convert your password to a clear text to do it .

How to do it ?

I check when you click on the button. I will add to it a class called ' active ' to specify if you clicked or no and when you click again this class will remove because I used the toggleClass ' add and delete ' when you click at first time. So the type is password and you want to show it I will firstly change the text to ' Hide Password ' the text of button and I select the previous element of type ' input '. I access to the attribute ' type ' and change the value to ' text '.

The Opposite Case :

Else if you click again the class will remove. It means we haven't this class in the button I will select the same element and change the type to ' password ' and the text of button to ' Show Password ' .

Video Tutorial

Curriculum

• JQuery How To Calculate The Textarea Remaining Characters by Keyup Function ( Video Tutorial )
• JQuery How To Create Counter Down by SetInterval And ParseInt functions ( Video Tutorial )
  

---

Posted on Utopian.io - Rewarding Open Source Contributors

---

Comments

[buckydurddle]

Thank you for the contribution. It has been approved.

Good work on your video tutorial.

I suggest you edit your "Description" text. Now it is one long sentence. Could you please edit this post to correct the punctuation? Utopian.io asks that all text be presented without any errors grammar or punctuation errors.

You can contact us on Discord.
[utopian-moderator]

[aymenz]

Thank you sir I changed it , it's correct now ?

[buckydurddle]

Hi @aymenz. Please connect with me in the Utopian Discord and I will help you.

[utopian.tip]

Hey @buckydurddle, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!

[utopian-io]

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

Achievements

• Seems like you contribute quite often. AMAZING!

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

[unkabird]

lets see