0.1.1 • Published 7 years ago
maskr v0.1.1
maskr
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 EventListener
s included in this module
Install
$ npm install --save maskr
Usage
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);
});
API
maskr(mask, input)
mask
Type: string
The template/mask to be used.
input
Type: string
The value string to match against the mask
.
Roadmap
- 1.0
- Recognize
_
character only (signifes "any") - Find fastest + lightest implementation
- Recognize
- 2.0
- Recognize
_
(any),a
(alpha), and9
(numeric) characters - Likely change API/Type definition
- Add options:
showEmpty
, custom definitions, ...
- Recognize
- 3.0
- Use
?
for optional masked input - TBD
- Use
Benchmarks
maskr
--> 6,415,566 ops/sec ±0.31% (94 runs sampled)
License
MIT © Luke Edwards