
Improve Your Inputs With AlpineJS's New x-mask Plugin
Caleb and the people behind AlpineJS and their wonderful plugins have struck again! This time with a new plugin that formats input values as you type and it goes by the directive x-mask.
From the x-mask page within AlpineJS's official docs:
Alpine's Mask plugin allows you to automatically format a text input field as a user types.
This is useful for many different types of inputs: phone numbers, credit cards, dollar amounts, account numbers, dates, etc.
As I normally do when the micro framework drops something new--I decided to give it a whirl with a simple CodePen demo.
After replicating a few of the examples from the official docs, I decided to push myself a little and do something a little more complex.
International Number Switcher Dynamic Mask
I'm sure you've all encountered one on the web: an input control group with a dropdown on the left for the international calling code, and a number (or pseudo number) field on the right for the rest of the number.
The Alpine Component
<script> function intCodesComponent() { return { intCodes: [ { name: "Korea, Republic of South Korea", dial_code: "+82", code: "KR", format: '99 9999 9999' }, { name: "United States", dial_code: "+1", code: "US", format: '(999) 999-9999' } ], selectedDialCode: '+1', selectedFormat: '(999) 999-9999', onSelectChangeHandler(e) { const country = intCodes.find((element) => { return element.dial_code == this.selectedDialCode }) this.selectedFormat = country.format }, } } </script>
Not much logic to it really. Alpine's reactivity takes care of most of it.
The steps I took were:
- Store an array of country code data and their respective phone number format
- Create a handler function for the <select> element that updates our selectedFormat reactive property
- Use our new x-mask:dynamic directive on the text input and pass it our selectedFormat
The Demo
Alpine x-mask Plugin Demo by James (@James0r)
on CodePen.
Leave a comment below if you end up using this and found it helpful!
Code on web assassins.
