Input Masking

[bajirama]

Question

I know this group is super helpful, and I need some guidance on input masking, for example. I need to capture an IP address and restrict the user to the IP address format. Please advise. 

[vickorian]

what element are you trying to limit the mask to? Is this just an input field? AgGrid?

@bajirama

[vickorian]

@bajirama Please see discussion #2869

[falkoschindler]

Masking a ui.input for an IP address seems to be rather challenging, since the number of digits can change:

ui.input('IP').props('mask="###.###.###.###"')

This doesn't allow you to input "192.168.1.1". So I wonder if masking actually makes sense for IPs...

[bajirama]

Thanks Everyone will try and post the result

[rodja]

I would do it like this:

with ui.row().classes('items-end gap-2'):
    octet1 = ui.number(min=0, max=254, step=1).props('dense outlined autofocus')
    ui.label('.')
    octet2 = ui.number(min=0, max=254, step=1).props('dense outlined')
    ui.label('.')
    octet3 = ui.number(min=0, max=254, step=1).props('dense outlined')
    ui.label('.')
    octet4 = ui.number(min=0, max=254, step=1).props('dense outlined')

Or, if you want some validation instead of auto-correction:

def validate() -> None:
    for octet in [octet1, octet2, octet3, octet4]:
        if not octet.value:
            continue
        try:
            if not 0 <= int(octet.value) <= 254:
                ui.notify('Number must be between 0 and 254')
        except Exception:
            ui.notify('Invalid ip address')

with ui.row().classes('items-end gap-2'):
    octet1 = ui.number(step=1, on_change=validate).props('dense outlined autofocus')
    ui.label('.')
    octet2 = ui.number(step=1, on_change=validate).props('dense outlined')
    ui.label('.')
    octet3 = ui.number(step=1, on_change=validate).props('dense outlined')
    ui.label('.')
    octet4 = ui.number(step=1, on_change=validate).props('dense outlined')

[bajirama]

both the items works - thanks a lot guy really appreciated it