Filament•16mo ago

Textinput masking with alpine not working

The following code gives an error about not able to find $input. This is code from the v3 documentation. What am I doing wrong?

TextInput::make('cardNumber')
    ->mask(RawJs::make(<<<JS
        $input.startsWith('34') || $input.startsWith('37') ? '9999 999999 99999' : '9999 9999 9999 9999'
    JS))

TextInput::make('cardNumber')
    ->mask(RawJs::make(<<<JS
        $input.startsWith('34') || $input.startsWith('37') ? '9999 999999 99999' : '9999 9999 9999 9999'
    JS))

Solution:

I've found my answer. The problem was a semicolon in the end of the JS. ``` TextInput::make('cost_price') ->prefix('€') ->mask(RawJs::make(<<<'JS'...

Jump to solution

5 Replies

Ties PolOP•16mo ago

When doing it like this it works, however i want to use the money() function from alpine.

TextInput::make('sales_price')
                                            ->placeholder('€')
                                            ->mask(RawJs::make(<<<JS
                                                function x(input) {
                                                    return input.startsWith('34') || input.startsWith('37')
                                                        ? '9999 999999 99999'
                                                        : '9999 9999 9999 9999'
                                                }
                                            JS
                                            )),

TextInput::make('sales_price')
                                            ->placeholder('€')
                                            ->mask(RawJs::make(<<<JS
                                                function x(input) {
                                                    return input.startsWith('34') || input.startsWith('37')
                                                        ? '9999 999999 99999'
                                                        : '9999 9999 9999 9999'
                                                }
                                            JS
                                            )),

LeandroFerreira•16mo ago

try this:

TextInput::make('cardNumber')
    ->mask(RawJs::make(<<<JS
        &#36;input.startsWith('34') || &#36;input.startsWith('37') ? '9999 999999 99999' : '9999 9999 9999 9999'
    JS))

TextInput::make('cardNumber')
    ->mask(RawJs::make(<<<JS
        &#36;input.startsWith('34') || &#36;input.startsWith('37') ? '9999 999999 99999' : '9999 9999 9999 9999'
    JS))

@tiespol in your example change <<<JS to <<<'JS' https://github.com/filamentphp/filament/pull/7321/commits/cbef39ca085a3ce903a2cbe31602b540ea549065

GitHub

Docs - input mask with RawJs by leandrocfe · Pull Request #7321 · f...

single quotes missed Changes have been thoroughly tested to not break existing functionality. New functionality has been documented or existing documentation has been updated to reflect changes....

Ties PolOP•16mo ago

Thanks for you reaction! I'm actually trying to get a money mask. Do you know how to get the money() method from alpine ? Or is there any custom money mask for filament?

Solution

Ties Pol•16mo ago

I've found my answer. The problem was a semicolon in the end of the JS.

TextInput::make('cost_price')
->prefix('€')
->mask(RawJs::make(<<<'JS'
     $money($input, ',', '.', 4)
JS
)),

TextInput::make('cost_price')
->prefix('€')
->mask(RawJs::make(<<<'JS'
     $money($input, ',', '.', 4)
JS
)),

Ties PolOP•16mo ago

Thank you!

Gaming

Programming

Textinput masking with alpine not working