input.numbered

Numbered Vanila v1.0.5

Plugin for create an input mask of numbers

new Numbered(el, options);

Default options

{
    mask: '+7 (###) ### - ## - ##', // Mask for input value
    numbered: '#',                  // Masking definition
    empty: '_',                     // Empty masking definition char (or space)
    placeholder: false              // Enable  placeholder to mask
}

NPM

https://www.npmjs.com/package/input.numbered

Initialize

var numberedFromId = new Numbered('#numbered');

or

var numberedFromClass = new Numbered('.numbered', {
    mask: '#### - #### - #### - ####',
    empty: 'X',
    placeholder: true
});

or

var numberedFromTag = new Numbered('input');

or

var numberedFromSelector = new Numbered('form input.numbered');

or if jQuery included

var $numbered = $('#numbered');
var numberedFromJQuery = new Numbered($numbered);

setVal

var example3 = new Numbered('#example3', {
    mask: '## / ## / ####',
    empty: '-'
});
$('.set').on('click', function (event) {
    example3.setVal('30 / 12 / 2015');
});
$('.clear').on('click', function (event) {
    example3.setVal('');
});

getVal(raw = false)

var example1 = new Numbered('#example1');
$('.get').on('click', function (event) {
    alert('Value: ' + example1.getVal());
});
$('.get-raw').on('click', function (event) {
    alert('Raw value: ' +example1.getVal(true));
});

reInit

var example1 = new Numbered('#example1');
$('.set').on('click', function (event) {
    $('#example1').val('30 / 12 / 2015');
    example1.reInit();
});

Validate

Validate method returns 1 - is valid, 0 - is empty, -1, is invalid. The result can be Integer or Array depending on the number of elements. You can listen to your desired events and to validate out at any time.

var $numbered = $('#numbered');
var numbered = new Numbered($numbered);
$numbered.on('change blur input focusin', function () {
    var validate = numbered.validate();
    $numbered
        .toggleClass('error', validate < 0)
        .toggleClass('empty', validate === 0)
        .toggleClass('valid', validate > 0);
});

Destroy

var numbered = new Numbered('#numbered');
numbered.destroy();