Вступление #

Маска для полей ввода, реализована на базе Imask.js.
Для работы маски можно использовать по умолчанию класс .js-mask.

Установка #

Пример разметки и инициализации маски.

    <input class="js-mask" type="text" placeholder="Введите номер телефона"/>

    BasicMask.init('.my-field');
    BasicMask.init(document.querySelector('.my-field'));
    BasicMask.init(document.querySelectorAll('.my-field'));

    // или

    BasicMask.init(); // по умолчанию инициализирует элементы с классом .js-mask

Если не устраивают текущие конфигурации, то можно самостоятельно указать настройки imask.js.

    BasicMask.options('#my-field', {
        mask: Number,
        min: -10000,
        max: 10000,
        thousandsSeparator: ' '
    });

Конфигурация #

Настройки, которые указываются при помощи специальных data-атрибутов.

data-mask-options #

В значениях указываются параметры для гибкой настройки маски.

mask #

Указывает тип маски.

Принимает следующие значения:

pattern #

Указывает шаблон маски, у каждого типа по умолчанию есть свои шаблоны, более подробно можно узнать из офиц.документации Imask.js.

Значения, которые используются по умолчанию:

lazy #

Ленивый вывод маски.

Принимает следующие значения:

min #

Указывает минимальное число.
Данный параметр поддерживают несколько типов маски: date и number.

max #

Указывает максимальное число.
Данный параметр поддерживают несколько типов маски: date, number и currency.

thousandsSeparator #

Разделитель для чисел. Принимает любое строковое значение.

format #

Преобразование даты в строку, на примере date pattern.

parse #

Преобразование cтроки в дату, противоположность format, на примере date pattern.

autofix #

Режим автоисправления. Принимает boolean значение, по умолчанию false;

date pattern #

Паттерн у даты работает с доп.параметрами: format и parse.

В данном примере, при помощи метода BasicMask.updateOptions() реализуем маску YYYY-MM-DD.

    <label for="field-date-pattern">
        <span class="name">Введите свой номер телефона</span>
        <input
            class="field"
            id="field-date-pattern"
            type="text"
            placeholder="ГОД-МЕСЯЦ-ДЕНЬ"
            data-mask-options='{ "mask": "date" }'>
    </label>

    BasicMask.updateOptions('#field-date-pattern', {
        'pattern': 'Y-`m-`d',
        'format': function (date) {

            let day   = date.getDate(),
                month = date.getMonth() + 1,
                year  = date.getFullYear();


            if (day < 10)   day = "0" + day;
            if (month < 10) month = "0" + month;

            return [year, month, day].join('-');

        },

        'parse': function (str) {

            let yearMonthDay = str.split('-');

            return new Date(yearMonthDay[0], yearMonthDay[1] - 1, yearMonthDay[2]);

        }
    });

Методы #

options() #

Инициализировать маску со своими параметрами.

    BasicMask.options(element, options);

где

updateOptions() #

Обновить или добавить параметры для маски.

    BasicMask.updateOptions(element, options);

где