Search for a command to run...
Add comma separator to numbers in text fields as an when you type
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.
Or
<script>
Alpine.data('x-data', {
get computedValue() {
return this.myValue.replace(/,/g, '');
}
});
</script>
<span x-text="computedValue"></span>
Setting the content of an element with a number formatted with Indian currency
Defining a property to an object using Object.defineProperty()
Using PhotoSwipe v5 plugin and vanilla JavaScript with AlpineJS replacing jQuery for a photogallery section. Use of script type="module"
This is second part in the series to make use of getters and setters in an AlpineJS object, that converts INR to USD. Well, only a setter has been used here where a function call is made to the setter priceInINR when the textbox of the USD value chan...
Accessing a AlpineJS data in a vanilla JavaScript function out of the AlpineJS component
Alpine JS
15 posts
Content articles for AlpineJS (https://alpinejs.dev) - currently using alpinejs@3.15.11
<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='this.value = this.value.replace(/,/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")'
with this :
x-mask:dynamic="$money($input)"
Finally :
<!-- Alpine Plugins -->
<script defer src="https://unpkg.com/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>
<!-- Alpine Core -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<input
type="text"
name="bid"
placeholder="Enter your bid amount"
pattern="[0-9,.]{0,10}"
x-mask:dynamic="$money($input)"
/>