attach

Вешает маску на <input>: форматирует при вводе и вставке, держит курсор на месте, Backspace проходит через литералы. Подробнее — Поле ввода.

Сигнатура

function attach(input: HTMLInputElement, mask: MaskInput, options?: AttachOptions): AttachedMask

interface AttachOptions {
  onChange?: (state: MaskState) => void;
  raw?: boolean;
  placeholder?: string;
}

interface MaskState { value: string; raw: string; complete: boolean; valid: boolean }

interface AttachedMask {
  readonly raw: string;
  readonly complete: boolean;
  readonly valid: boolean;
  update(mask: MaskInput, options?: AttachOptions): void;
  refresh(): void;
  destroy(): void;
}

	Описание
onChange	Вызывается при изменении: { value, raw, complete, valid }. Перерисовка без изменений его не вызывает
raw (опция)	Обработчики ввода (@input, v-model) получают значение без маски, в поле при этом видна маска
placeholder	Символ для пустых позиций: '_' → +7 (___) ___-__-__, '0' → +7 (000) 000-00-00, '•', 'X' — любой символ, в том числе цифра. Шаблон виден при фокусе и пока поле заполнено не до конца
raw, complete, valid	Текущее значение без маски, заполненность и правильность (isValid)
update(mask, options?)	Сменить маску или опции (например, при выборе другой страны)
refresh()	Переформатировать значение, записанное в поле из кода, — курсор останется на месте
destroy()	Снять маску

Пример

const input = document.querySelector<HTMLInputElement>('#phone')!;
const select = document.querySelector<HTMLSelectElement>('#country')!;

const field = attach(input, phone('ru'), {
  onChange: ({ complete }) => input.classList.toggle('done', complete),
});

select.addEventListener('change', () => field.update(phone(select.value as PhoneCountry)));

См. также

• Поле ввода
• vMask — то же для Vue