One more input mask library
JavaScript lib for making static masked inputs
Features
- only static masks (fixed number of characters)
- working with pure DOM inputs
- able to make solutions for React/Vue/Angular based on this library
Usage
Installing:
npm install --save @krutoo/input-mask
Usage:
import { InputMask } from '@krutoo/input-mask/dist/dom';
const input = document.querySelector('input#phone');
const inputMask = InputMask(input, {
mask: '___-____-____',
placeholder: '_',
pattern: /\d/,
onChange: ({ value, cleanValue, ready }) => {
// value is string with masked value
// cleanValue is string only writable characters
// ready is boolean which shows that the mask is completely filled
},
});
// returns actual state of input
const { value, cleanValue, ready } = inputMask.getData();
// sets value manually
inputMask.setValue('00000000000');
// disables masking on element
inputMask.disable();
Advanced usage
This package also contains parts for build your own solution to provide input masking.
There is a several functions:
-
createReducer
: returns reducer which takes input state and change action and returns the new state -
defineChanges
: takes current state and next state and returns change action
To Do
✅ Create helper to use withvanilla js
(no frameworks)✅ Dividereact solution
onreact
andvanilla js
solutions- Add able to use middleware methods to prepare value before mask applying
- Add examples of usage in React, React Native, Vue, Angular, Svelte...