Maska is a Simple Zero-dependency Input Mask Library

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
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.

Read more

© 2024 Extly, CB - All rights reserved.