How can I simulate the function show/hide password?

Doreen shared this question 3 years ago

I created a Login page with 2 input fields for E-Mail and Password. I use the data master for validation of correct user logins. Now I want to use the function show/hide password. The input field for the password ist now masked by using Type: password. Now I want to add a condition to the link "show password". If the user clicks the link, the type of the input field is changed to text and the link of the button changes to "hide password". How can I build the condition, especially for showing the user the typed password?

Thank you in advance for your help.

Comments (2)


Hello Doreen,

Unfortunately, since the type is set to password, any value placed within the text input will reflect the masking. However, you may create two text inputs nested on top of one another, one of which is not a password field type. Then, when selecting the 'show password' button you can set the value of the regular text input to the password to see its non-masked value. Here's the specific events as seen in the images below:

1. If the show password label has not been selected yet, then set the value of the hidden text input to the value of the masked password field.

2. Set the value of the show password label to hide password.

3. Hide the masked text input.

4. Show the non-masked text input.

5. If hide password is displayed on the label, then hide the text input showing the character value of the password and show the masked text input.

If you would like, you may send us your email at I may then send you the actual prototype file for your use.





I also would like to receive a prototype of that feature so I can make my own by looking yours. Can I send an email?