Discussion on "Replacing oninput with x-mask" | Hashnode

Discussion

Anjanesh Lekshminarayanan

Web UI Engineer

Nov 30, 2022

Replacing oninput with x-mask

<input type="text" pattern="[0-9,.]{0,10}"/> Using the mask plugin we can achieve the comma separators inserted to the numbers in the text box instead of writing our own JavaScript. Replace something like this we get from searching Google oninput='th...

alpinejs.in1 min read

#commas #numbers #html #plugin #alpinejs

Responses(1)

Mehdi Yaghoubi

Nov 5, 2023

and How to save the value of the masked model in the livewire component to the database. the x-mask:dynamic="$money($input)" is something like 99,100,200 but I need to save 99100200?

I haven't yet got into Livewire but you could do a replaceAll(',', '') on form submit - bad idea if it's repetitive.

<script>
    Alpine.data('x-data', {
        get computedValue() {
            return this.myValue.replace(/,/g, '');
        }
    });
</script>

<span x-text="computedValue"></span>

Search Hashnode

Replacing oninput with x-mask

Responses(1)