Svelte IMask Plugin

@imask/svelte

Install

npm install @imask/svelte

Mask Action Example

<input
  {value}
  use:imask={options}
  on:accept={accept}
  on:complete={complete}
>

<script>
  import { imask } from '@imask/svelte';

  const options = {
    mask: '{8}000000',
    lazy: false
  };

  let value = '';

  function accept({ detail: maskRef }) {
    console.log('accept', maskRef.value);
    value = maskRef.value;
  }

  function complete({ detail: maskRef }) {
    console.log('complete', maskRef.unmaskedValue);
  }
</script>

More options see in a guide.

Input Mask Component

Currently plugin does not have component for input with 2-way binding support because it is not possible to pass all event listeners to child (issue).

Workaround is here: https://svelte.dev/repl/b590cddb69f4452b8f7704bd1e721e76?version=3.16.7