Hi -
I’m hoping someone can help me figure out how to do an interaction like what is in the image below. We’d like a placeholder in the text box (---_) that goes away with each digit that is entered. I feel like this has got to be something super simple that I’m missing. Any ideas?
Thanks!
Hey @ehayes, unfortunately, Axure currently does not have a built-in feature that allows achieving this effect–I’ve submitted a feature request for you, and our product team will further review it to define if this change can be implemented in future releases.
As a workaround, you might try to apply an approach demonstrated in this forum post.
The other way would be to use a “hint” property of the text fields on the Interactions Pane and set the desired mask there so that a user can have a notion of the expected format.
Lastly, since you mentioned the debit card field, you might also be interested in checking out our “Credit Card Form” from our default “Sample Form Patterns” library:
I hope you find it helpful in your projects!
That’s wonderful that you’re doing a feature request for this. That will be very helpful to us! Are you able to let me know once that’s been completed? Thank you for looking into this!
I took a crack at this and was able to come up with something that resembles the behavior you’re describing. It’s not the most simple setup but it works!
Credit Card Form Example.rp (49.6 KB)
Background:
It does require a lot of conditional logic and properties to dissect the text and its properties. If you want to create a more simple one without the dashes, then it can be pretty straightforward as you’re just removing underscores starting from the front; then replace them as you backspace.
If you want to include the dashes as well, then one way I found was to create conditions/cases for each instance of when we want to inject a dash as opposed to an underscore. There probably is a more efficient way of doing so… but I left it at this before getting lost further down the rabbit hole.
Setup:
I used two text fields where the input field is left blank and the output field contains the underline structure. The input will be on top and set at a low opacity. This will be what the user will interact with and contain all of our interactions that will modify the actual output.
For the simple version, there are two main expressions used for typing (removing underscores) and backspacing (adding underscores).
Typing: [[This.text + Target.text.slice(This.text.length)]]
Backspacing: [[This.text + “_” + Target.text.slice(This.text.length+1)]]
Essentially, we are stitching what we currently have on our input (“This.text”) with what we have on our output (“Target.text”). We will use “.slice” and “.length” to determine how much we want to add of the current output structure.
When we consider a credit card form with the dashes, this can become unwieldy as we have to account for each dash and backspace and all of the different behaviors that accompany it as a result.
Here are some reference pages of our docs just in case:
