Maska is a simple, zero-dependency input mask for JS, Vue, Svelete, and Alpine.js. Let’s say you want to mask a phone number format; you could use the following HTML to format the phone number according to the format +1 ### ###-####
<details>
<summary>Phone mask</summary>
<input class=”maska” data-maska=”+1 ### ###-####” placeholder=”+1 999 999-99-99″>
</details>
When the user inputs a phone number, it will follow mask formatting and enforce the provided format:
Example phone mask using Maska
Maska has integrations for popular JavaScript libraries, and it is also easy to use on its own or integrate with any framework that you’d like:
No dependencies and small size: ~3 Kb gzipped
Vanilla JS version + Vue 2/3, Alpine.js and Svelte integrations
Works with native and custom inputs
Custom tokens with modifiers, transform functions, and hooks
Number mask mode: easy money formatting
Dynamic, reversed, and eager masks
To get started with Maska, check out the official documentation; the source code is also available on GitHub at beholdr/maska.
The post Maska is a Simple Zero-dependency Input Mask Library appeared first on Laravel News.
Join the Laravel Newsletter to get all the latest Laravel articles like this directly in your inbox.
Source: Read MoreÂ
