Filament•2y ago

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('#.#.#.#'))

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'))

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.

1 Reply

Patrick Boivin•2y ago

Just a thought: would it work to use 4 numeric text inputs instead? min 0 / max 255

Gaming

Programming

Mask TextInput to enter an IP address