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.

Captura_de_pantalla_2023-07-02_a_las_21.02.29.png

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.

Mask TextInput to enter an IP address

Similar Threads

Mask TextInput to enter an IP address

Similar Threads

Similar Threads

Similar Threads