Toggle Password Masking

Is there a way to toggle the password masking without having to use a dynamic panel?

For example: If I had a password field defaulted to mask the input text, and I wanted the user to be able to click a checkbox to show or hide the password they typed in.

Would I be able to do that with a condition? Maybe…set [input field] to ‘masked’ or toggle masking on [input field]

I don’t think this is possible but it doesn’t hurt to ask!

Thanks in advance.

i don’t think you can change type of text field directly, but what you are looking for is easy to implement with 2 text fields. see attached.
show.hide pass.rp (61 KB)

2 Likes

You can certainly emulate it through logic on a single text field.
I’m working on something along the same lines.
The default password on this demo is 1234, which will enable the “administrative screen”.
Click on ‘Change Administrative Password’ and that functionality is there.

on Axshare

There really isn’t much going on in the code side of things, but you need to set up 3 global variables

Every button push of the keyboard/keypad will do 2 things:

  1. Set the text for PinCode_for_txt to the actual value of the pressed key [[PinCode_for_txt]][[This.text]]
  2. Set the equivalent '**’ for PinCode_Asterix that will be displayed if the toggle is off. [[PinCode_Asterix]]


The “show PIN” (your toggle) button will simply turn on or off the boolean ‘boolShowNumbers’, and then trigger the Set Text to be either PinCode_for_txt or PinCode_Asterix depending on it’s TRUE or FALSE value.
Each of the keys on the keyboard/keypad will go through the same 2-state logic check.

Bob’s your uncle.
Pinpad_Wireframe.rp (117 KB)

I was going to suggest something very similar, except using a DP. A field in each state, each with an OnTextChange to set the text on the other equal to the text on This. Then a checkbox that can be used to toggle between the two states - which seems to be a more standard way of showing/hiding than two buttons online.

1 Like

Good trick and allow us to use a custom master field into a repeater for multiple entries with different text field types. Repeaters facilitate the edition of complex master widgets.

And since this seems a popular topic, here is another solution: the javascript solution :slight_smile:


OnSelected

javascript:void($('[data-label="Input.Password"] input').prop("type", "text"));


OnUnselected

javascript:void($('[data-label="Input.Password"] input').prop("type", "password"));


Show-password.rp (47.3 KB)

1 Like

@strelec how did you make text pass show * (star) ?