Possible to display textbox tel type as (999)999-9999?

Anvil Q&A
1

Just starting to use this and loving it. I am not a programmer but had self-taught visual foxpro an eon ago. Curious if there is a way to format mask a telephone texbox so that it displays (and, ideally, also accepts input) as above.
TIA
Rose

1 Like
2

Hello and welcome.

Are you asking how to force the textbox to display a phone number in a specific format? If so, you could do the format checking and setting based on when an event occurs (eg., lost focus, pressed enter, change).

Please have a look at the docs on events and feel free to share the code you have tried as this may help to make things clearer.

1 Like
3

A little late, but for further reference:

  1. Import in “native libraries”:
    <script src="https://unpkg.com/imask"></script>

  2. Add to imports:
    from anvil.js.window import IMask

  3. Initialize input masker in the constructor:

  def __init__(self, **properties):
    self.init_components(**properties)

    IMask(
      anvil.js.get_dom_node(self.input_doc), 
      {'mask': '000.000.000-00'},
    )

    IMask(
      anvil.js.get_dom_node(self.input_phone), 
      {'mask': '(00)00000-0000'},
    )
3 Likes
4

Welcome to the Forum, @movelabs !

Is this

the correct address for the IMask library you mentioned?

1 Like
5

Yes, it’s that one.

Working like a charm.

6

Great! Now I know where to go for documentation. I have a lot of data-entry fields. Formatting would make them much more user-friendly.

Thanks for finding this library.

2 Likes