@goldencomm/alpine-plugin-imask

Installation

Install the plugin from npm:

npm install @goldencomm/alpine-plugin-imask

Import it into your bundle alongside Alpine, and register it with Alpine.plugin():

import Alpine from "alpinejs";
import imask from "@goldencomm/alpine-plugin-imask";

Alpine.plugin(imask);

Alpine.start();

Usage

Basic usage:

<input
  type="text"
  x-imask="{ mask: '200-000-0000', definitions: { '2': /[2-9]/ } }"
/>

The $imask "magic" gives you access to all of the methods and properties on the IMask instance.

<input
  type="text"
  x-imask="{ mask: '200-000-0000', definitions: { '2': /[2-9]/ } }"
  x-init="$imask.on('complete', () => { console.log('complete', $imask.unmaskedValue) })"
  x-on:input="console.log('input', $imask.unmaskedValue)"
/>