Phone mask in input field


I have a text field and I want it to be formatted instantly with user input. Something like that:

  • I want start the input with “+55” by default (like “7” in gif above);
  • I need the max caracthers function;
  • I want put the symbols “(”, “)” and “-”.

I’m sorry if I already have guidance for something as simple here on the forum, but I just searched all the pages and didn’t find it. What got me closer was this:

But it differs because while his is on display, mine is on typing. And I have no idea how to do it.

I imagine it is something with JavaScript; if so, I would appreciate a step-by-step tutorial, as I did not find practical ways in the documentation to do this with JS (remembering that I am a beginner).

Thanks in advance!!

1 Like

Hi! Sorry for the delayed answer.

Hmm, I’ve never done anything like this before, but this can be done with just logic and formulas I think. However it’ll be quite complex to do, so unless you think this is really important, I wouldn’t bother doing it.

To get you started:
Basic setup I could think of is that you have a page variable (in my example phone_number that is text type) bound to a (primitive) input field value. Then when the input field onChange triggers, you check various things about the phone_number page variable in a series of IF logic nodes. First you check if it contains "+55 (", then when it’s long enough you add the other ") " and so forth.

Feb-02-2021 15-45-34

However… if the user for example tries to delete the "+55 (" part, it gets tricky. My logic does not cover this case. You would have to structure the logic differently to take into account every different action the user might do. If you do want to do something like this, check how the app you’re referencing reacts if this happens.

Hello Mevi) Could you show it in details with formulas etc. ?

I tried to do it with so many ways, but it’s not working…
Maybe I can do it with your example :slightly_smiling_face:)

Hi! Unfortunately I can’t find the app where I did this test piece. However, the rules depend on the formatting you want. Basically what I’m doing there is checking if the page vars begins with +55 (, if not then add it to the beginning, and then the if condition checks the length and adds ) at the certain length etc.