Что такое Inputmask

Inputmask — библиотека для JavaScript, предназначенная для создания масок ввода в текстовых полях формы. Маска определяет структуру вводимых данных и ограничивает формат значения ещё на этапе набора текста. Это позволяет контролировать корректность пользовательского ввода без необходимости вручную реализовывать сложную логику проверки.

Библиотека применяется для:

  • телефонных номеров;
  • дат;
  • времени;
  • банковских карт;
  • почтовых индексов;
  • денежных значений;
  • IP-адресов;
  • серийных номеров;
  • пользовательских шаблонов ввода.

Основная задача Inputmask — обеспечить предсказуемый формат данных и улучшить взаимодействие с формами.

Проблемы ввода данных без масок

При отсутствии ограничений пользователь может вводить данные в произвольном виде:

+7 777 1234567
87771234567
7771234567
7-777-123-45-67

Все варианты могут обозначать один и тот же телефонный номер, но система получает разные строки. Это создаёт проблемы:

  • усложняется валидация;
  • возникают ошибки при сохранении;
  • затрудняется поиск по базе;
  • ухудшается UX интерфейса.

Inputmask решает эту проблему путём жёсткого или частично гибкого форматирования.

Принцип работы Inputmask

Библиотека накладывает шаблон на поле ввода и управляет:

  • допустимыми символами;
  • позициями курсора;
  • автоматическим добавлением разделителей;
  • отображением placeholder-символов;
  • поведением удаления;
  • вставкой данных из буфера обмена.

Пример телефонной маски:

Inputmask("+7 (999) 999-99-99").mask(input);

Во время ввода:

+7 (___) ___-__-__

символы _ обозначают ожидаемые цифры.

Установка библиотеки

Через npm

npm install inputmask

Подключение:

import Inputmask from "inputmask";

Через CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/inputmask/5.0.9/inputmask.min.js"></script>

Базовое применение

HTML:

<input id="phone">

Jav * aScript:

const input = document.getElementById("phone");

Inputmask("+7 (999) 999-99-99").mask(input);

После применения маски поле начинает контролировать формат ввода.

Что означает символ 9

В Inputmask используются специальные символы-маркеры.

Наиболее распространённый:

9

Обозначает обязательную цифру от 0 до 9.

Пример:

Inputmask("99/99/9999")

Результат:

12/05/2026

Основные шаблонные символы

Символ Значение
9 Цифра
a Буква
* Буква или цифра

Пример:

Inputmask("aa-999")

Допустимый ввод:

AB-123

Недопустимый:

12-ABC

Метод mask()

Метод mask() применяется к DOM-элементу.

Inputmask("999-999").mask(input);

Также возможно применение сразу к нескольким элементам:

Inputmask("999-999").mask(document.querySelectorAll("input"));

Применение через data-атрибуты

HTML:

<input data-inputmask="'mask': '+7 (999) 999-99-99'">

Jav * aScript:

Inputmask().mask(document.querySelectorAll("input"));

Такой подход удобен при большом количестве полей.

Маска даты

Inputmask("99.99.9999").mask(input);

Результат:

31.12.2026

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

Например:

99.99.9999

формально соответствует шаблону.

Alias в Inputmask

Alias — готовые встроенные маски.

Пример даты:

Inputmask({
    alias: "datetime",
    inputFormat: "dd.mm.yyyy"
}).mask(input);

Преимущества alias:

  • встроенная логика проверки;
  • поддержка локализации;
  • готовые настройки;
  • упрощённая конфигурация.

Маска времени

Inputmask("99:99").mask(input);

Более корректный вариант:

Inputmask({
    alias: "datetime",
    inputFormat: "HH:MM"
}).mask(input);

Денежные значения

Inputmask поддерживает числовые форматы.

Пример:

Inputmask({
    alias: "numeric",
    groupSeparator: " ",
    radixPoint: ".",
    digits: 2,
    digitsOptional: false,
    prefix: "$ "
}).mask(input);

Результат:

$ 12 500.00

Маска банковской карты

Inputmask("9999 9999 9999 9999").mask(input);

Во время ввода номер автоматически разбивается на блоки.

Маска IP-адреса

Inputmask({
    alias: "ip"
}).mask(input);

Пример:

192.168.0.1

Маска email

Inputmask({
    alias: "email"
}).mask(input);

Inputmask ограничивает структуру адреса электронной почты.

Placeholder

Placeholder отображает незаполненные позиции.

Пример:

Inputmask({
    mask: "99/99/9999",
    placeholder: "д"
}).mask(input);

Результат:

дд/дд/дддд

Автоматическое удаление маски

Опция:

clearIncomplete: true

Пример:

Inputmask({
    mask: "+7 (999) 999-99-99",
    clearIncomplete: true
}).mask(input);

Если ввод не завершён, поле очищается при потере фокуса.

Lazy-маска

Опция:

showMaskOnHover
showMaskOnFocus

Пример:

Inputmask({
    mask: "99/99/9999",
    showMaskOnHover: false
}).mask(input);

Удаление маски при отправке формы

Иногда серверу требуется значение без форматирования.

Например:

+77771234567

а не:

+7 (777) 123-45-67

Для этого используется:

removeMaskOnSubmit: true

Пример:

Inputmask({
    mask: "+7 (999) 999-99-99",
    removeMaskOnSubmit: true
}).mask(input);

Получение чистого значения

Метод:

unmaskedvalue()

Пример:

const im = new Inputmask("+7 (999) 999-99-99");

im.mask(input);

console.log(input.inputmask.unmaskedvalue());

Результат:

7771234567

Динамические маски

Inputmask поддерживает несколько шаблонов одновременно.

Пример:

Inputmask({
    mask: [
        "+7 (999) 999-99-99",
        "+1 (999) 999-9999"
    ]
}).mask(input);

Библиотека автоматически выбирает подходящий формат.

Regex-маски

Inputmask умеет работать через регулярные выражения.

Пример:

Inputmask({
    regex: "[A-Za-z]{3}[0-9]{3}"
}).mask(input);

Допустимое значение:

ABC123

Пользовательские определения

Можно создавать собственные типы символов.

Пример:

Inputmask.extendDefinitions({
    "~": {
        validator: "[+-]"
    }
});

Использование:

Inputmask("~999").mask(input);

Допустимые значения:

+123
-456

События Inputmask

Библиотека поддерживает обработчики событий.

Пример:

Inputmask({
    mask: "9999",
    oncomplete: function () {
        console.log("Ввод завершён");
    },
    onincomplete: function () {
        console.log("Ввод не завершён");
    }
}).mask(input);

Работа с React

Пример:

import Inputmask from "inputmask";
import { useEffect, useRef } from "react";

function PhoneInput() {
    const ref = useRef(null);

    useEffect(() => {
        Inputmask("+7 (999) 999-99-99").mask(ref.current);
    }, []);

    return <input ref={ref} />;
}

Работа с Vue

mounted() {
    Inputmask("+7 (999) 999-99-99")
        .mask(this.$refs.phone);
}

Работа с jQuery

Inputmask долгое время активно использовался вместе с jQuery.

$("#phone").inputmask("+7 (999) 999-99-99");

Поддержка мобильных устройств

Inputmask корректно работает:

  • на Android;
  • iOS;
  • мобильных браузерах;
  • сенсорных клавиатурах.

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

Автоматическое форматирование вставленного текста

При вставке значения библиотека пытается преобразовать данные под шаблон.

Например:

7771234567

автоматически становится:

+7 (777) 123-45-67

Nullable-маски

Опция:

nullable: true

Позволяет возвращать null, если поле пустое.

Inputmask и валидация

Inputmask не заменяет полноценную серверную проверку.

Маска:

99.99.9999

не гарантирует существование даты.

Маска контролирует:

  • структуру;
  • формат;
  • тип символов.

Полная проверка данных должна выполняться отдельно.

Преимущества Inputmask

Контроль формата

Пользователь вводит данные только в нужном формате.

Улучшение UX

Форма становится более предсказуемой.

Снижение количества ошибок

Минимизируется вероятность некорректного ввода.

Поддержка сложных шаблонов

Библиотека поддерживает:

  • динамические маски;
  • регулярные выражения;
  • числовые форматы;
  • даты;
  • локализацию.

Гибкость настройки

Практически все аспекты поведения можно переопределить.

Недостатки Inputmask

Не заменяет валидацию

Необходимо дополнительно проверять данные.

Сложность сложных конфигураций

Продвинутые маски могут быть трудны в поддержке.

Возможные проблемы UX

Слишком жёсткие маски иногда мешают вводу.

Дополнительная нагрузка

Библиотека добавляет JavaScript-код и обработчики событий.

Когда Inputmask особенно полезен

Наиболее распространённые сценарии:

  • регистрационные формы;
  • CRM-системы;
  • банковские интерфейсы;
  • интернет-магазины;
  • административные панели;
  • формы доставки;
  • финансовые сервисы;
  • корпоративные приложения.

Архитектурная особенность библиотеки

Inputmask работает поверх обычного <input> и не требует создания специальных компонентов.

Библиотека:

  • отслеживает ввод;
  • управляет курсором;
  • перехватывает клавиши;
  • модифицирует отображаемое значение;
  • синхронизирует внутреннее состояние маски с DOM.

Благодаря этому Inputmask может интегрироваться практически в любой frontend-проект.

Оглавление