A simple and beautiful way to mask values or input elements.
Install:
$ npm install --save maskerjs
Include:
<script src="src/masker.js"></script>
or
var Masker = require('maskerjs');
A masker object has useful methods for applying/unapplying masks to both values and input elements.
- patterns
String | Array<String>
mask patterns. - filter
RegExp | Function
filter characters in input value.
Example:
var code4Masker = new Masker('_ _ _ _', /^[0-9]$/);
var telMasker = new Masker(
[
'___-____',
'(___) ___-____',
'+_-___-___-____'
],
/^[0-9]$/
);
This method applies the mask to the given input element, and re-applies the mask whenever the input value is change by a user.
- element
InputElement
an input element to apply mask to.
Example:
var code4Input = document.getElementById('code4');
code4Masker.mask(code4Input);
// code4Input.value '1234' => '1 2 3 4'
var telInput = document.getElementById('tel');
telMasker.mask(telInput);
// telInput.value '1234567' => '123-4567'
// telInput.value '1234567890' => '(123) 456-7890'
// telInput.value '12345678900' => '+1-234-567-8900'
This method unapplies the mask to the given input element, and removes listeners for user input changes.
- element InputElement an input element to unapply mask from.
Example:
var code4Input = document.getElementById('code4');
code4Masker.unmask(code4Input);
// code4Input.value '1 2 3 4' => '1234'
var telInput = document.getElementById('tel');
telMasker.unmask(telInput);
// telInput.value '123-4567' => '1234567'
// telInput.value '(123) 456-7890' => '1234567890'
// telInput.value '+1-234-567-8900' => '12345678900'
This method applies the mask to a give value and returns the masked value.
- value
String
a value to be masked.
Example:
code4Masker.maskVal('1234'); // '1 2 3 4'
telMasker.maskVal('1234567'); // '123-4567'
telMasker.maskVal('1234567890'); // '(123) 456-7890'
telMasker.maskVal('12345678900'); // '+1-234-567-8900'
This method unapplies the mask to a give value and returns the unmasked value.
- value
String
a value to be unmasked.
Example:
code4Masker.unmaskVal('1 2 3 4'); // '1234'
telMasker.unmaskVal('123-4567'); // '1234567'
telMasker.unmaskVal('(123) 456-7890'); // '1234567890'
telMasker.unmaskVal('+1-234-567-8900'); // '12345678900'
This event listener is one of two used to bind input changes to the masker. This is used in both the vanilla masker and the jQuery plugin. It is exposed so that others can bind those events in new ways like make a plugin for some other UI interaction library.
This event listener is one of two used to bind input changes to the masker. This is used in both the vanilla masker and the jQuery plugin. It is exposed so that others can bind those events in new ways like make a plugin for some other UI interaction library.
A simple method to register the masker jQuery plugin.
- jQuery
jQuery
a reference to the jQuery library.
Example:
Masker.jQueryPlugin(jQuery);
This method applies the mask to the selected input element, and re-applies the mask whenever the input value is change by a user.
- masker
Masker
a masker to apply to the selected element(s).
Example:
var telMask = new Masker(
[
'___-____', // local
'(___) ___-____', // area
'+_-___-___-____', // international
],
/^[0-9]$/ // allowed chars
);
// pass in a Masker object
jQuery('input[type="tel"]').mask(telMask);
This method applies the mask to the selected input element, and re-applies the mask whenever the input value is change by a user.
- patterns
String | Array<String>
mask patterns. - filter
RegExp | Function
filter characters in input value.
Example:
// pass in the Masker constructor arguments
jQuery('input[type="tel"]').mask(
[
'___-____', // local
'(___) ___-____', // area
'+_-___-___-____', // international
],
/^[0-9]$/ // allowed chars
);
This method unapplies the mask to the selected input element, and removes listeners for user input changes.
Example:
// remove the masker
jQuery('input[type="tel"]').unmask();
This method applies the mask to the value of the selected input and returns the masked value.
- masker
Masker
a masker to apply to the selected element's value.
Example:
var telMask = new Masker(
[
'___-____', // local
'(___) ___-____', // area
'+_-___-___-____', // international
],
/^[0-9]$/ // allowed chars
);
// pass in a Masker object
var maskedVal = jQuery('input[type="tel"]').maskVal(telMask);
This method applies the mask to the value of the selected input and returns the masked value.
- patterns
String | Array<String>
mask patterns. - filter
RegExp | Function
filter characters in input value.
Example:
// pass in the Masker constructor arguments
var maskedVal = jQuery('input[type="tel"]').maskVal(
[
'___-____', // local
'(___) ___-____', // area
'+_-___-___-____', // international
],
/^[0-9]$/ // allowed chars
);
This method unapplies the mask to the value of the selected input and returns the unmasked value.
Example:
var unmaskedVal = jQuery('input[type="tel"]').unmaskVal();