FilamentF
Filament•3y ago
Alejandro Sanchez

Mask TextInput to enter an IP address

Hi, i'm trying to create e text input for entering an ip address.
I created this code, that kinds works but it adds extra dots dependig on the numbers entered. 

TextInput::make('ip')
    ->mask(fn (TextInput\Mask $mask) => $mask
        ->patternBlocks([
            '#' => fn (TextInput\Mask $mask) => $mask
                ->numeric()
                ->minValue(1)
                ->maxValue(255)
        ])
        ->pattern('#.#.#.#'))


Tried this aproach too, but with the same results: 

TextInput::make('ip')
    ->mask(fn (TextInput\Mask $mask) => $mask
        ->patternBlocks([
            '#1' => fn (TextInput\Mask $mask) => $mask
                ->numeric()
                ->minValue(1)
                ->maxValue(255),
            '#2' => fn (TextInput\Mask $mask) => $mask
                ->numeric()
                ->minValue(1)
                ->maxValue(255),
            '#3' => fn (TextInput\Mask $mask) => $mask
                ->numeric()
                ->minValue(1)
                ->maxValue(255),
            '#4' => fn (TextInput\Mask $mask) => $mask
                ->numeric()
                ->minValue(1)
                ->maxValue(255),
        ])
        ->pattern('#1.#2.#3.#4'))

While writing, this looks as in the first image.
Captura_de_pantalla_2023-07-02_a_las_21.02.29.png
Was this page helpful?