Вступление #

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

Маска ввода реализована на базе Imask.js.

Установка #

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

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

	// настройки Imask.js(https://imask.js.org/guide.html).
	const options = {
		type: 'number',
		min: 100,
		max: 10000,
		thousandsSeparator: '.',
	};

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

    // или

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

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

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

data-mask-options #

В значениях указываются параметры для гибкой настройки маски, с ними можно ознакомиться на странице официальной документации Imask.js. Здесь же показаны основные параметры:

type #

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

pattern #

Шаблон маски для поля, каждый тип имеет свой шаблон по умолчанию. Более подробную информацию можно найти на странице официальной документации.

Паттерны у даты #

Если для даты необходимы изменить паттерн по умолчанию, то для этого необходимо будет ещё использовать два параметра: format и parse.

В данном примере реализуем маску YYYY-MM-DD:

	<label for="field-date-pattern">
		<span class="name">Введите дату</span>
		<input
			class="field"
			id="field-date-pattern"
			type="text"
			placeholder="ГОД-МЕСЯЦ-ДЕНЬ"
		>
	</label>

    BasicMask.init('#field-date-pattern', {
		type: 'date',
		pattern: 'Y-`m-`d',
		format: function (date) {
			let day = date.getDate();
			let month = date.getMonth() + 1;
			let 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]);
		}
	});

Методы #

updateOptions() #

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

    BasicMask.updateOptions(element, options);

Параметры: