Show Hide Password Toggle

#1

I’m trying to create a show hide toggle for password going from masked to unmasked.
I can’t change the text type from Password to Text. Has anyone done this before?
BTW i’m using a checkbox to switch between a masked password and unmasked password.

#2

You could do it using two input fields, one masked and one not, one on top of the other.

Add an OnTextChange case on each one that updates the text on the other. This way whichever one you’re typing in, the other will have the same text.

Then use your checkbox to hide/show the one on top. You could also have the same case set the focus to the correct field as well.

#3

Would you be able to show me an rp example?
I couldn’t get the OnTextChange to work (assigning the updates to one text field to another).

Thanks for the help!

#4

Here it is with both fields visible so you can see it in action. Look at the OnTextChange event for each field, it’s very simple.

double-input-field.rp (46.1 KB)

Password confirmation and z-order
#5

I’m using Axure7, I can’t open your file is there anyway you can make it Axure 7 compatible?
Thanks so much!

#6

I don’t have Axure 7 installed anymore. Axure 8 is a free upgrade from 7 so you can download it at axure.com/download

But it’s just this:

Input1
OnTextChange
Set text on Input2 to: [[this.text]]

Input2
OnTextChange
Set text on Input1 to: [[this.text]]

That’s it.

#7

Thank You SOOO much!!!

#8

Thanks for this. Very useful

#9

This was super helpful to me! Thank you!

One thing isn’t quite working for me though. I tried the following:

“Then use your checkbox to hide/show the one on top. You could also have the same case set the focus to the correct field as well.”

In my case, it’s a “show” or “hide” text button in the field but that shouldn’t matter…

The issue is the focus seems to only be working for a split second and then I have to click back into focus. Any idea what’s going on? I’m attaching a file with the weird behavior. 03_Password Show-Hide Toggle.rp (662.5 KB)