A tiny (156B) utility to compare a string against a template mask.
Technically, this is still a WIP! See the Roadmap.
Use this module to compare a value against a desired template. Put differently, you can format a string however you'd like.
This is probably most useful for "masking" <input /> values. There are no EventListeners included in this module
$ npm install --save maskr
const maskr = require('maskr');
const demo = '(___) ___-____';
maskr(demo, '');
//=> { value:'(___) ___-____', cursor:1 }
maskr(demo, '12345678');
//=> { value:'(123) 456-78__', cursor:12 }
maskr(demo, '1234567890');
//=> { value:'(123) 456-7890', cursor:14 }
Example <form /> Usage: (demo)
const maskr = require('maskr');
const form = document.getElementById('form');
const inputs = form.querySelectorAll('input');
function setValue(ev) {
if (ev !== void 0 && ev.type === 'keydown') {
ev.preventDefault();
this._value += ev.key;
}
const mask = this.getAttribute('data-mask');
const { value, cursor } = maskr(mask, this._value);
// set visible value & cursor position
this.value = value;
this.setSelectionRange(cursor, cursor);
}
[].forEach.call(inputs, el => {
if (!el.hasAttribute('data-mask')) return;
// init internal tracking
el._value = el.value || '';
// first-run if has value
(el.value.length > 0) && setValue.call(el);
// attach listeners
el.onfocus = el.onkeydown = setValue.bind(el);
});
Type: string
The template/mask to be used.
Type: string
The value string to match against the mask.
_ character only (signifes "any")_ (any), a (alpha), and 9 (numeric) charactersshowEmpty, custom definitions, ...? for optional masked inputmaskr
--> 6,415,566 ops/sec ±0.31% (94 runs sampled)
MIT © Luke Edwards