Imask

Текстовое поле с маской ввода — телефоны, номера карт, суммы. Маску делает библиотека IMask.

Настройки: одно поле с параметрами IMask, записанными как объект JavaScript.

javascript

{ mask: '+{7} (000) 000-00-00' }

javascript

{
    mask: Number,
    thousandsSeparator: ' ',
    radix: ',',
    scale: 2
}

javascript

{
    mask: Date,
    pattern: 'd{.}`m{.}`Y',
    blocks: {
        d: { mask: IMask.MaskedRange, from: 1, to: 31 },
        m: { mask: IMask.MaskedRange, from: 1, to: 12 },
        Y: { mask: IMask.MaskedRange, from: 1900, to: 2099 }
    }
}

Это живой объект JavaScript, а не JSON, — потому в нём и работают Number, Date и IMask.MaskedRange. Из этого же следует, что синтаксическая ошибка ломает поле, а не сообщает о себе.

Маска сохраняется вместе со значением

Браузер отправляет текст в том виде, в каком он показан, со всеми скобками: телефон приедет как +7 (912) 345-67-89, а не 79123456789. Для вывода на странице это удобно, но если номер надо сравнивать, набирать или отдавать во внешний сервис — чистите его на входе или храните отдельно.

Библиотека грузится с CDN

IMask подтягивается с unpkg.com и в пакет не входит. В менеджере без доступа в интернет маска просто не применится, и поле поведёт себя как обычный текст.

Imask ​

Imask