tinyval-mask

Маски ввода без зависимостей: телефоны, банковские карты, даты, суммы, документы РФ и свои шаблоны.

• ~1 kB gzip для своего шаблона, ~2.6 kB с телефоном и привязкой к полю
• Курсор не прыгает, Backspace проходит через скобки и дефисы, вставка из буфера в любом формате
• Чистые функции mask / unmask работают и на сервере — например, чтобы привести телефоны к одному виду
• Директива v-mask для Vue: в v-model — значение с маской или без (.raw), видимый шаблон +7 (___) ___-__-__
• Маски дат не пропускают 32-е число и 13-й месяц

Установка

npm install tinyval-mask

Попробовать

Телефон — страна по коду: попробуйте +375 или +49

🇷🇺 Россия

Значение без маски: ""

Номер карты

Значение без маски: ""

Сумма

Значение без маски: ""

Дата

Значение без маски: ""

Госномер

Значение без маски: ""

Число с минусом

Значение без маски: ""

Быстрый старт

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

mask('89991234567', phone());          // '+7 (999) 123-45-67'
unmask('+7 (999) 123-45-67', phone()); // '79991234567'
mask('4276123456789012', card());      // '4276 1234 5678 9012'
mask('12ab34', '99-99');               // '12-34' — your own pattern

attach(document.querySelector('#phone'), phone()); // a mask on an <input>

<script setup lang="ts">
import { phone } from 'tinyval-mask/presets';
import { vMask } from 'tinyval-mask/vue';

const phoneMask = phone();
</script>

<template>
  <input v-model="form.phone" v-mask="phoneMask" />
</template>

Что почитать

• Готовые маски — телефоны 28 стран, карты, даты, документы, суммы
• phoneAuto — страна по коду номера, флаг и название страны
• Шаблоны — свои маски: токены, необязательные части, несколько вариантов
• Что возвращают маски — значение в поле, в v-model и в данных
• Поле ввода — как работает курсор, Backspace и вставка
• Vue — v-mask, v-model, tinyval-vue и UI-библиотеки
• Маски и валидация — проверка значения через tinyval