How can I enter a text and have it change to asterisk?

#1

Hi,
I need to have 2 input fields where a user can enter a new password. When they enter their password, the only thing that shows on screen is the asterisk. There will be checkbox next to it to view the passwords entered, however by default, it will only show asterisk when they type it in. How would I do that? I don’t want to have 2 fields with different names to show hide etc… is there a way to do it in interactions with a case/event?

Here is what I have done so far but it’s not working:

  • In the first input field, I have set “text changed” to :******.
  • I have a checkbox on the side. I have it set to “Set text: label name to ABC123”.
    However, it does not change the asterisk at all to ABC123.

Thank you, Anahita

#2

This is because there is no way to modify Text Field properties with Axure interactions. I think you’re stuck with something like this for now. It’s not so bad, really.

Show Password Example.rp (45.9 KB)

Can I ask why you don’t want/can’t have 2 input fields? Maybe we can find a workaround if we understand the design limitation better.

#3

This could work. The reason why I didn’t want to duplicate the fields is because another one interaction is dependent on the click in that field. Not a big deal I guess. I can change it.

Question: what is the [[This.text]], in the interaction. Does it mean whatever the user enters? I am not very good with the interaction script stuff so if I learn a better way to do it, then I will definitely use that.

Anahita

#4

[[This.text]] is an expression (click the fx next to value to see the full expressions window) containing a widget reference and property of that widget.

“This” is a reference to the “current” widget, the one that you have selected, the one that this current interactions panel is associated with.

“text” is one of the properties that a widget has by default. You can find both of these items under the Widget category when you click “Insert Variable or Function”, there are several more listed in that category. There’s things like its name or position.

There’s more ways to reference a widget:

  • You can see Target in the Widget category, this is a reference to a shape that is being used as the target for an action. See Tip 4 on this blog post for more info on that.
  • You can also manually reference a widget in the Local Variable section of the Expression window. If you add a local variable, give it a name, set it to “widget” then when you pick your target widget, you can reference it as you do with This and Target.

I’ve made a contrived example on top of the Show Password demo to show these two methods:
Demo | Show Password Example with This.text.rp (49.6 KB)

#5

thank you very much. appreciate your help.

#6

I forgot to add this previously and only now just remembered… you mentioned you didn’t want to duplicate the fields because another interaction is dependent on the click in that field.

If you have several events on different shapes that will trigger the same action, when that “shared action” changes in some way, you now have to go and change it everywhere it occurs. I’m always bound to miss one little thing somewhere, and now my prototype behaves all weird.

What you can do however, is put your shared action that is triggered from multiple shapes on to one single shape. Then use Fire Event in those multiple other places when you want that shared thing to be triggered.

Caveats (there’s always something :slight_smile:):

  • this requires some forethought, I often don’t remember to do this until I have to change it that first time OR if I’m lucky, recognize it happening when i start putting in the second trigger of the action
  • You do still have to make sure that the Fire Event part happens everywhere you want to trigger the Shared Action

You can do some really cool things like multiple nested layers of conditional logic with Fire Events, but I need to go dig those up in my archives to figure out exactly how I did it.

I also use it a fair amount in Components with complex actions, I use a set of hidden shapes with interactions on them that will trigger different behaviours in the component.

Demo | shared shape actins.rp (59.4 KB)

How to collapse selected accordion when choosing another?