solid-imask
npm install solid-imask
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>
);
};
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>
);
};