Поле ввода

attach вешает маску на <input>. Самое сложное в масках — не форматирование, а поведение при редактировании, и attach берёт его на себя.

import { attach } from 'tinyval-mask';
import { phone } from 'tinyval-mask/presets';

const input = document.querySelector<HTMLInputElement>('#phone')!;
const field = attach(input, phone(), {
  onChange: ({ value, raw, complete }) => console.log(value, raw, complete),
});

field.raw;      // '79991234567'
field.complete; // true
field.destroy(); // remove the mask

Что происходит при вводе

Действие	Поведение
Ввод в конце	Литералы появляются сами: 9 → +7 (9
Ввод в середине	Символы сдвигаются, курсор остаётся сразу за введённым
Backspace после ) или -	Удаляется ближайшая цифра, курсор не «застревает» на литерале
Delete перед литералом	То же в другую сторону
Вставка	Принимается любой формат: 8 999 123-45-67, +79991234567, (999) 1234567
Неподходящие символы	Игнорируются: буквы в номере не появятся

Курсор считается по введённым символам, а не по позиции в строке. Поэтому он не прыгает, даже когда маска добавляет или убирает разделители — например, пробелы между тысячами в numberMask.

Совместимость с фреймворками

attach форматирует значение раньше обработчиков фреймворка (слушатель input в фазе перехвата), поэтому v-model, onChange в React и подобные получают уже отформатированное значение. После программной правки (Backspace через литерал) attach сам отправляет событие input.

Если значение поля меняется из кода (input.value = …), вызовите field.update(mask) — оно переформатирует значение.

См. также

• attach
• Vue — директива v-mask