Solid IMask Plugin

solid-imask

Install

npm install solid-imask

Mask Input Example

import { createMaskedInput } from "solid-imask";

const NumberInput = createMaskedInput({
  mask: "+{7}(000)000-00-00",
  lazy: false, // make placeholder always visible
  placeholderChar: "#", // defaults to '_'
});

const App = () => {
  return (
    <div>
      <NumberInput
        onAccept={({ value, unmaskedValue, typedValue }, maskRef, e) => {
          console.log({ value, unmaskedValue, typedValue });
          console.log(maskRef);
          console.log(e);
        }}
        onComplete={() => console.log("complete")}
      ></NumberInput>
    </div>
  );
};

Mask Directive Example

import { masked } from "solid-imask";

const mask = {
  mask: "+{7}(000)000-00-00",
  lazy: false, // make placeholder always visible
  placeholderChar: "#", // defaults to '_'
};

const App = () => {
  return (
    <div>
      <input
        use:masked={{
          mask,
          onAccept: ({ value, unmaskedValue, typedValue }, maskRef, e) => {
            console.log({ value, unmaskedValue, typedValue });
            console.log(maskRef);
            console.log(e);
          },
          onComplete: () => console.log("complete"),
        }}
      ></input>
      <p
        contenteditable="true"
        use:masked={{
          mask,
          onAccept: ({ value, unmaskedValue, typedValue }, maskRef, e) => {
            console.log({ value, unmaskedValue, typedValue });
            console.log(maskRef);
            console.log(e);
          },
          onComplete: () => console.log("complete"),
        }}
      ></p>
    </div>
  );
};