There are times when creating a form where a field needs its content in a certain state. This can be something as simple as a date field where the field needs to look like
<!-- Alpine Plugins --> <script defer src="https://unpkg.com/@firstname.lastname@example.org/dist/cdn.min.js"></script> <!-- Alpine Core --> <script defer src="https://email@example.com/dist/cdn.min.js"></script>
npm install @alpinejs/mask
import Alpine from 'alpinejs' import mask from '@alpinejs/mask' Alpine.plugin(mask)
Using the Mask plugin
With the mask plugin now available within the HTML it doesn't take too much to be able to implement it into a page. The first thing is to decide what the mask will need to be, to do this the Mask plugin has three different characters that are used to create the mask.
*can be used for any character
acan be used for aplha characters (a-z,A-Z)
9can be used for numeric characters (0-9)
Using the example from the introduction
DD/MM/YYYY the mask that will be used will be
To add the mask to text input box the following can be used
<input type="text" name="dob" x-data x-mask="99/99/9999" />
As seen in the above example there are two non-standard HTML attributes. The first is the normal Alpine.js
x-data this ensures that Alpine.js is looking at the element. The second attribute is
x-mask, this is the attribute used for defining the mask itself.